jquery图像库下一期/上一期

我有下面的代码在我的页面我可以运行下一个图像点击，但上一个图像点击不工作。单击next（下一步）会显示div1-div2-div3，但单击prev（上一步）不会显示任何内容

我的HTML：

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

---

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

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

.prev不起作用，因为第一个元素根据定义不能有任何以前的同级。下一步可以工作，因为第一个子元素总是有三个元素——它似乎是循环的，因为您一直按照预期将第一个div移动到末尾。要使.prev起作用，应选择最后一个元素并在其前面加上前缀：

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

---

您正在从第一个元素调用.prev。第一集之前没有任何内容，是吗？但在我的最后一集3之后没有下一集，但当我单击“下一集”时，它将淡出第3集和淡出第1集。这很好。没有prev for first:$'slideshow>div:first'有什么方法可以反向循环它吗？另外，live已经被弃用了。我不会使用它，除非您被jQuery<1.4所困扰。你用on代替。@user1941729-我不是一家自由软件开发公司。试着自己解决它，如果你不能解决它，然后再发布另一个问题。这里有一个提示，使用“if”语句。如果div:last，那么回到幻灯片的开头，无限期地对图像进行预处理和后处理会给他带来问题。其中之一是，根据单击下一个/上一个的顺序，他将以一个无序的幻灯片结束。