如何阻止我的空白div出现后单击上一个按钮？

所以我编写了一个非常简单的幻灯片与上一个和下一个按钮。如何阻止我的空白div出现后单击上一个按钮？

但是，如果按以前的按钮，滑块的作品，但随后滑到空白格...

注意：让滑块负荷按左边的灰色按钮，然后让幻灯片继续... ...有是一个空格div

我该如何解决这个问题，以及导致问题的原因是什么？

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

    // fade out current slide (first), fade in next slide and move first slide to end 
    var nextSlide = function() { 
     $("#slider > div:first") 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo("#slider"); 
    } 

    var nextSlideTimer = setInterval(nextSlide, 5000); 

    // fade out current slide (first) and move last slide to top and fade in 
    $("#prev-button").click(function() { 
     clearInterval(nextSlideTimer); 

     $("#slider > div:first") 
     .fadeOut(1000); 
     $("#slider > div:last") 
     .fadeIn(1000) 
     .prependTo("#slider"); 

     nextSlideTimer = setInterval(nextSlide, 5000) 
     setTimeout(nextSlideTimer, 5000) 
    }); 

    $("#next-button").click(function() { 
     clearInterval(nextSlideTimer); 

     $("#slider > div:first") 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo("#slider"); 

     nextSlideTimer = setInterval(nextSlide, 5000) 
     setTimeout(nextSlideTimer, 5000) 
    });

来源

2015-03-31 John Vaughan

我没有得到一个空白格。 – TreeTree 2015-03-31 14:45:06

让滑块加载按左边的灰色按钮，然后让幻灯片继续...有一个空格div – 2015-03-31 14:46:24

我觉得你的问题是，在.prependTo上一个按钮，点击之前a标记实际上被插入的最后一个div，但之后应该插入。

只需更换

.prependTo("#slider");

要

.insertAfter("#slider > a#next-button");

入住这fiddle

来源

2015-03-31 14:53:46 Sam

谢谢，这是非常明显的，现在我看它 – 2015-03-31 14:57:25

很高兴它帮助！ – Sam 2015-03-31 14:57:51

您的问题是，因为滑块内的按钮应该是外面还是在上一个改变您的订单“prependTo”按钮。当您命令“prependTo”时，div会检查按钮并打破位置。获取Slider外部的按钮，它会没事的。

来源

2015-03-31 15:27:22 DDA

你的问题是，前面的代码按钮div插入在按钮之前，所以当nextButton或nextSlide函数被执行并到达最后一个div时，它会找到一个按钮而不是div元素，因此它显示一个空白DIV。

在这部分代码中，我认为是不必要的setTimeout，因为您已经使用了setInterval，并且为什么nextSlideTimer值是一个数字而不是函数。

nextSlideTimer = setInterval(nextSlide, 5000) 
setTimeout(nextSlideTimer, 5000)

，你可以在这些链接找到一个很好的解释和例子：

stackoverflow.com/settimeout-or-setinterval

javascript.info/tutorial/settimeout-setinterval

来源

2015-03-31 15:42:58

如何阻止我的空白div出现后单击上一个按钮？

回答

相关问题