Jquery Slideshow

Question

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

<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

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

Answer 2

我不认为需要在元素前后追加和前缀。您只需淡出所需的index 1即可

演示

$(function() {

  var $img = $('#slideshow img');   // Cache your elements selector
  var c = 0; // counter // Represents the first image index to show
  var n = $img.length; // number of images

  $img.eq(c).siblings().hide(); // Target the 'c' one and hide it's siblings

  $('#previous, #next').click(function(){
     c = this.id=='next'? ++c : --c ;      // increase - decrease counter
     $img.fadeTo(1000,0).eq( c%n ).stop(1).fadeTo(1000,1); // Loop using reminder
  });

});

c被用作计数器来跟踪当前图像的index，这比使用.eq(index)选择器和所有兄弟姐妹使用.siblings()选择器可以访问的要多。

Answer 3

您的代码的问题是prev()的first不是最后一个。因此，当您查找第一个元素的next()元素时，它会工作，但是对于第一个元素的prev()元素，它不起作用。

演示：http://jsfiddle.net/tAaCN/3/

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

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

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