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)

                    }

但是当我通过点击更改幻灯片时，自动滑动开始随机间隔随机变化。

javascript自动图像幻灯片

2 个答案: