Jquery幻灯片放映

Question

我制作了一个jquery幻灯片，下面是代码：

HTML

<div id="slideshow">
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div id="previous">previous</div>

<div id="next">Next</div>

CSS

#slideshow {
    width: 700px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#slideshow img {
    position: absolute; 
}

jQuery

$(document).ready(function() {
    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow');
    });

    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    });
});

“下一个”按钮工作，但当我点击“上一个”图像消失！有人能帮我吗？

这是小提琴。

Answer 1

小提琴:http://jsfidle.net/taacn/4/

由于您的选择器使用的是img:first，您不能使用.prev()访问前一个元素，因为您已经位于第一个子元素。

您可以选择最后一个元素并将其作为幻灯片的第一个子元素“预置”。

$(function() {
    $('#slideshow img:gt(0)').hide();

    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000);
        $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
    });

    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    });
});