如何修復簡單的滑塊bug - javascript

-1

我嘗試使用javascipt創建一個簡單的滑塊。問題是，當計數到達最後一個元素，它這麼想的改變顯示阻止這是代碼如何修復簡單的滑塊bug - javascript

<div id="slider"> 
<img class="slide" src="img/img13.jpg" alt=""/> 
<img class="slide" src="img/img14.jpg" alt=""/> 
<img class="slide" src="img/img15.jpg" alt=""/> 
<img class="slide" src="img/img16.jpg" alt=""/> 
<img class="slide" src="img/img17.jpg" alt=""/> 
<img class="slide" src="img/img18.jpg" alt=""/> 
</div> 

var delay = 3000; 
var i = 0; 
var allSliderSlides = document.getElementsByClassName('slide'); 
allSliderSlides[0].style.display = "block"; 
setInterval(function(){ 
    i++; 
    allSliderSlides[i].style.display = "block"; 

    if(allSliderSlides[i-1].style.display=="block"){ 
     allSliderSlides[i-1].style.display="none"; 
    } 

    if(i == allSliderSlides.length-1){ 

     i = 0; 
     allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
     allSliderSlides[i].style.display = "block"; 


    } 

},delay);

，請給我一些意見或建議，以解決這個問題感謝

來源

2016-11-23 user4876127

您重新分配我的最後一個元素成爲塊

嘗試之前= 0：

if(i == allSliderSlides.length-1){ 

    allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
    allSliderSlides[i].style.display = "block"; 
    i = 0; 
}

來源

2016-11-23 22:14:57

這裏的問題：

if(i == allSliderSlides.length-1){ 

     i = 0; 
     allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
     allSliderSlides[i].style.display = "block"; 


    }

您正在重置計數器，然後再更改樣式。這導致顯示第一個圖像，最後一個圖像將不會顯示。

解決方案：移動i = 0;到最後一行塊像這樣：

if(i == allSliderSlides.length-1){ 


       allSliderSlides[allSliderSlides.length-1].style.display = "none"; 
       allSliderSlides[i].style.display = "block"; 
       i = 0; 


      }

希望有所幫助。

來源

2016-11-23 22:19:22

如何修復簡單的滑塊bug - javascript

回答

相關問題