Question

我希望我的网站访问者能够使用jQuery slider来“拖动”他们的方式通过一系列图像。一次只显示一个图像，当用户左右拖动滑块手柄时，显示的图像将变为序列中的下一个/上一个。此外，这是一个棘手的部分，我希望新图像在上一个图像的顶部淡入。

我使用jQuery滑块运行滑块代码：

$( "#mySlider" ).slider({
range: "max",
min: 1,
max: 10,
value: 1,
slide: function( event, ui ) {
    // CODE THAT MAKES THE NEW IMAGE FADE IN
}
});

目前，我的计划实际上是将HTML中的所有图像放在彼此重叠并具有不透明度的单独DIV中。拖动手柄会将相关的div放在顶部并将其淡入。

任何想法如何做到这一点？

Answer 1

我会做这样的事情（链接到JSFiddle）

HTML

<div id="gallery">
    <img src="http://i.imgur.com/SfzW1.jpg" class="abs pic1" />
    <img src="http://i.imgur.com/hsVyi.jpg" class="abs pic2" />
    <img src="http://i.imgur.com/RJVm9.jpg" class="abs pic3" />
    <img src="http://i.imgur.com/dw00y.jpg" class="abs pic4" />
</div>

和css

#gallery{
    position: relative;
}

img {
    display:none;
    width: 200px;
    height: 100px;
    z-index:0;
}


.pic1{
    display:inline;
}
.abs{
    position: absolute;
    top:0;
    left:0;
}

使用Javascript / jquery的

$( "#mySlider" ).slider({
range: "max",
min: 1,
max: 4,
value: 1,
slide: function( event, ui ) {
    var pic_num = ui.value;
    var new_image_elm = $("#gallery img.pic"+pic_num);
    var old_image_elm = $("#gallery img:visible");

    if(new_image_elm != null){
        var zIndex = parseInt(old_image_elm.css('z-index'));
        new_image_elm.css('z-index', zIndex+1);        
        new_image_elm.fadeIn( "slow", function() {
            // Animation complete
            old_image_elm.hide();
        });         
    }
}
});

使用滑块手柄拖动图像幻灯片

1 个答案: