如何使用 w3slider 在滑块图像中添加自动播放？

Question

我用过滑块。但是当我点击箭头时它会手动滑动

这是我的 HTML 代码：

<div class="w3-content w3-display-container" style="box-shadow: 0px 0px 5px 0px rgba(0,0,0,.3);">

    <img class="mySlides" src="img1.png" />
    <img class="mySlides" src="img2.png" />

    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>         

</div>

这是我的 JS 代码：

var slideIndex = 1;
showDivs(slideIndex);
plusDivs(slideIndex);

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

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
}

现在我想为幻灯片图片添加自动播放。

Answer 1

我在你的 javascript 和 html 文件中添加了以下代码 -

在脚本中创建 autoplay 变量，如下所示：

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var autoplay = setInterval("plusDivs(-1)", 3000);
    if (n > x.length) {
        slideIndex = 1
    }
    if (n < 1) {
       slideIndex = x.length
    }
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
    autoplay;
  }

如何使用 w3slider 在滑块图像中添加自动播放？

how to add auto-play in slider images using w3slider?

html

javascript

slider

autoplay