时间戳

首页 > 解决方案 > 如何在我的自定义滑块 JavaScript 代码中插入自动播放选项

javascript - 如何在我的自定义滑块 JavaScript 代码中插入自动播放选项

问题描述

我创建了一个滑块代码，但问题是我必须让它自动播放。这段代码实际上与我的自定义滑块兼容，我只想让它自动播放。我尝试了一些如下所示的代码：

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("contents-2");
    var slides2 = document.getElementsByClassName("contents-1");
    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].className = slides[i].className.replace(" cont-1", "");
    }
    for (i = 0; i < slides2.length; i++) {
        slides2[i].className = slides2[i].className.replace(" cont-2", "");
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active-page", "");
    }
    dots[slideIndex - 1].className += " active-page";
    slides[slideIndex - 1].className += " cont-1";
    slides2[slideIndex - 1].className += " cont-2";
    setTimeout(currentSlide, 2000);
}

请帮我处理这段代码，上面的代码不会自动播放，谢谢。

标签： javascripthtmlcss

解决方案

我尝试的新代码如下：

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("contents-2");
  var slides2 = document.getElementsByClassName("contents-1");
  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].className = slides[i].className.replace(" cont-1", "");  
  }
  for (i = 0; i < slides2.length; i++) {
slides2[i].className = slides2[i].className.replace(" cont-2", "");
  }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active-page", "");
  }
  dots[slideIndex-1].className += " active-page";
  slides[slideIndex-1].className += " cont-1";  
  slides2[slideIndex-1].className += " cont-2";
  setTimeout(function() {
        showSlides(slideIndex += 1);
    }, 4000);
}

上面的代码完美运行，但是当我使用导航按钮时，它会以非常高的速度自动播放

推荐阅读