如何阻止我的空白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出現後單擊上一個按鈕？

回答

相關問題