jquery - jquery 图片库下一个/上一个问题

Question

我的页面中有以下代码，我可以运行下一张图片点击，但上一张图片点击不起作用。单击“下一步”时，它向我显示 div1 - div2 - div3 但单击上一个时它没有显示任何内容。

我的 HTML：

<div id="slideshow">
    <img.prev>
    <img.next>
    <div1>
    <div2>
    <div3>
</div>

$("#slideshow > div:gt(0)").hide();

// this works fine
$('.next').live('click', function() {
    $('#slideshow > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}) ;

// this is not working
$('.prev').live('click',function(){
    $('#slideshow > div:first')
        .fadeOut(0)
        .prev()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
});

Answer 1

感谢您的代码在做什么。在第一个示例中，会发生以下情况：

$('.next').live('click',function(){
  $('#slideshow > div:first')   //get first div, div1, in slideshow
 .fadeOut(0)                    //fade div1 out
 .next()                        //get the next div, div2
 .fadeIn(1000)                  //fade div2 in
 .end()                         //end
 .appendTo('#slideshow');       //append the original div, div1, to the end of the show
}) ;

我看到的一个问题是您不断向幻灯片添加更多图像。这将导致大量的 DOM 元素。我认为你根本不想追加。

无论如何，您的代码在第二种情况下不起作用，因为......

$('.prev').live('click',function(){
 $('#slideshow > div:first')    //get first div, div1
 .fadeOut(0)                    //fade it out
 .prev()                        //previous is nothing because you already have the first one! This is no doubt why it breaks
 .fadeIn(1000)
 .end()
 .appendTo('#slideshow');       //again you are appending. Seems like a bad idea
}) ;

如果我要这样做，我会改用类。未经测试，但看起来像这样。

<div id="slideshow">
    <img.prev>
    <img.next>
    <div1 class="active">
    <div2>
    <div3>
</div>

$('.next').live('click',function(){
  $('#slideshow > div.active')  //get active div
  .fadeOut(0)                    //fade out
  .removeClass('active')
  .next()                        //get the next div
  .fadeIn(1000)                  //fade it in
  .addClass('active');           //make new div the active one
}) ;

$('.next').live('click',function(){
  $('#slideshow > div.active')  //get active div
  .fadeOut(0)                    //fade out
  .removeClass('active')
  .prev()                        //get the prev div
  .fadeIn(1000)                  //fade it in
  .addClass('active');           //make new div the active one
}) ;

Answer 2

.prev不起作用，因为根据定义，第一个元素不能有任何先前的兄弟姐妹。 .next之所以有效，是因为第一个孩子总是有三个元素——它似乎是循环的，因为您按预期将第一个 div 移动到末尾。为了.prev工作，您应该选择最后一个元素并将其添加到前面：

$("#slideshow > div:first").hide();
$("#slideshow > div:last").prependTo("#slideshow").fadeIn(1000);