javascript自動圖像幻燈片

Question

我想讓幻燈片圖像自動替換。這裏是我用來手動替換的代碼，點擊buttoms。對不起，如果這是一些基本問題，但我不真的使用JavaScript。我已經從w3schools中獲得了它，並嘗試將自動替換與此結合起來，但沒有奏效。 感謝您的回答。 PS：現在有3張圖片，4張將會。

    var slideIndex = 1; 

        showDivs(); 

        function plusDivs(n) { 
         showDivs(slideIndex += n); 
        } 

        function currentDiv(n) { 
         showDivs(slideIndex = n); 
        } 

        function showDivs(n) { 
        var i; 
        var x = document.getElementsByClassName("mySlides"); 
        var dots = document.getElementsByClassName("demo"); 
        if (n > x.length) {slideIndex = 1}  
        if (n < 1) {slideIndex = x.length} 
        for (i = 0; i < x.length; i++) { 
         x[i].style.display = "none"; 
        } 
        for (i = 0; i < dots.length; i++) { 
         dots[i].className = dots[i].className.replace(" w3-white", ""); 
        } 
        x[slideIndex-1].style.display = "block"; 
        dots[slideIndex-1].className += " w3-white"; 
        x[slideIndex-1].style.width = "784px"; 
        x[slideIndex-1].style.height = "350px"; 


        } 

Answer 1

你需要做的事情是不斷調用函數來改變幻燈片在一定的時間間隔。我在完成相同的修改後添加完整的代碼。

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
} 
var slides = document.getElementsByClassName("mySlides"); 
var dots = document.getElementsByClassName("dot"); 
var index = 0; 
setInterval(function() { 
    index++; 
    if(self.index == self.slides.length) { 
    index = 0; 
    } 
    currentSlide(index); 

}, 2000); 

而不是2000年，你可以給你任何需要的延遲。認爲這解決了你的問題。

Answer 2

謝謝，但它不起作用。

    var slideIndex = 1; 
        showDivs(); 

        function plusDivs(n) { 
         showDivs(slideIndex += n); 
        } 

        function currentDiv(n) { 
         showDivs(slideIndex = n); 
        } 

        function showDivs(n) { 
        var i; 
        var x = document.getElementsByClassName("mySlides"); 
        var dots = document.getElementsByClassName("demo"); 
        if (n > x.length) {slideIndex = 1}  
        if (n < 1) {slideIndex = x.length} 
        for (i = 0; i < x.length; i++) { 
         x[i].style.display = "none"; 
        } 
        for (i = 0; i < dots.length; i++) { 
         dots[i].className = dots[i].className.replace(" w3-white", ""); 
        } 
        x[slideIndex-1].style.display = "block"; 
        dots[slideIndex-1].className += " w3-white"; 
        x[slideIndex-1].style.width = "784px"; 
        x[slideIndex-1].style.height = "350px"; 
        setTimeout(slideShow, 5000); 

        } 
        slideShow(); 
        function slideShow() { 
         showDivs(slideIndex += 1); 
         currentDiv(n) 

        } 

但是當我通過單擊更改幻燈片，自動滑動開始在隨機時間間隔隨機變化：當我做到這一點，它會自動改變。