圖像滑塊旁邊的圖像預覽

Question

是否有任何類似的滑塊可與jQuery，其中第二圖像預覽是可見的滑塊的角落？

感謝

Answer 1

我創建了我最好的嘗試，在這個問題，我希望它足夠了，但我不喜歡它自己，因爲它使用的背景圖片。如果你需要幫助理解它，然後請問。您可以通過更改列表URL來更改圖像。我認爲我已經足夠動態，可以用更多圖像進行擴展。大小應該可以用css輕鬆改變。

爲了使其更好地工作，你可能會擁有它，所以當你在徘徊，直到你退出懸停狀態它被顯示爲「主」顯示預覽。

注意，這不幸的是僅適用於某些瀏覽器（Firefox的測試，並沒有對鉻工作）。這可能是可以解決的，basicly你需要了解如何對鉻如果skewX。

Demo

JQuery的

var elements = $("#urlList").children(); 
var urlArray = []; 
$(elements).each(function(index){ 
    urlArray.push($(this).html()); 
}); 

var index = 0; 
var currentImage = urlArray[0]; 
var previewImage = urlArray[1]; 

$('#next').click(function(){ 
    index += 1; 
    if(index > urlArray.length-1){ 
    index = 0; 
    } 
    $('.box').css("background-image","url('"+urlArray[index]+"')"); 
    var previewIndex = index+1; 
    if(previewIndex > urlArray.length-1){ 
    previewIndex = 0; 
    } 
    $(".insideBox").css("background-image","url('"+urlArray[previewIndex]+"')") 
}); 
$('#Previous').click(function(){ 
    index -= 1; 
    if(index < 0){ 
    index = urlArray.length -1; 
    } 
    $('.box').css("background-image","url('"+urlArray[index]+"')"); 
    var previewIndex = index +1; 
    if(previewIndex > urlArray.length-1){ 
    previewIndex = 0; 
    } 
    $(".insideBox").css("background-image","url('"+urlArray[previewIndex]+"')") 
}); 

HTML

<div class="box"> 
    <ul id="urlList"> 
    <li>http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg</li> 
    <li>http://hdlatestwallpaper.com/wp-content/uploads/2014/05/Green-Bubbles-Awesome-Background.jpg</li> 
    <li>http://www.psdgraphics.com/file/colorful-triangles-background.jpg</li> 
    </ul> 
    <div class="insideBox"> 
    </div> 
    <a id="next"> > </a> 
    <a id="Previous"> < </a> 
</div> 

CSS

.box{ 
    position:relative; 
    width:400px; 
    height:100px; 
    background-image:url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg'); 
    background-size:100%; 
    border:solid; 
    overflow:hidden; 
    z-index:1; 
} 

#urlList{ 
display:none; 
} 
.insideBox{ 
    position:absolute; 
    width:100px; 
    height:100px; 
    background-image:url("http://hdlatestwallpaper.com/wp-content/uploads/2014/05/Green-Bubbles-Awesome-Background.jpg"); 
    background-size:100%; 
    border:solid white; 
    opacity:0.8; 
    right:-5em; 
    transform:skewX(-55deg); 
    overflow:hidden; 
} 

.insideBox:hover{ 
    opacity:1; 
} 

a{ 
    margin-top:auto; 
    margin-bottom:auto; 
    width:20px; 
    position:absolute; 
    color:white; 
    display:block; 
    border:solid 1px white; 
    text-align:center; 
    font-family:arial; 
    border-radius:20px; 
} 
a#next{ 
    right:0; 

}