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');
    });
});

“下一个”按钮可以工作，但是当我单击“上一个”时，图像消失了!谁能帮我吗？

这是fiddle .

Answer 1

fiddle :http://jsfiddle.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');
    });
});