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) 

        } 

但是当我通过单击更改幻灯片，自动滑动开始在随机时间间隔随机变化：当我做到这一点，它会自动改变。