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

我不认为需要来回附加和前置元素。你可以淡出所需的index一个

演示版

$(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()。