Question

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

我的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);

jquery图片库next / prev issue

2 个答案: