jquery image gallery next/prev issue

我在我的页面中有下面的代码我可以运行下一个图像点击，但prev图像点击不工作。点击“下一步”它会显示我div1 - div2 - div3，但点击prev它不会显示任何东西。jquery image gallery next/prev issue

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

来源

2013-01-15 user1941729

你是从第一个元素调用.prev（）。第一个之前什么都没有，是吗？ –

但是在我的最后一个div3之后没有next（），但是当我点击next时，它会淡出div3和淡入淡出div1。这工作正常。 – user1941729

'first'没有'prev'：$（'＃slideshow> div：first'） –

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

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

来源

2013-01-15 15:21:03 mrtsherman

有没有什么方法可以将它反向循环？ – user1941729

@ user1941729 - 更新我将如何解决这个问题。 – mrtsherman

另外，'live'已被弃用。除非你坚持jQuery <1.4，否则我不会使用它。您可以使用'on'。 – mrtsherman

.prev不工作，因为第一个元素根据定义不能有任何以前的兄弟姐妹。 .next的作品，因为第一个孩子总是有三个元素 - 它似乎循环，因为你继续移动第一个div到期末如预期。对于.prev工作，你应该选择的最后一个元素，并在前面加上它：

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

来源

2013-01-15 15:25:39

ad-infinitum的前置和后置图像会导致他的问题。其中之一就是根据next/prev点击的顺序，他将以幻灯片顺序失败而告终。 – mrtsherman

jquery image gallery next/prev issue

回答

相关问题