How to make slideshow auto-play?

问题

This slide needs clicking on the "Next" button to play.
What can I do to make the slide show auto-play base on this function?
Here is my source.

<script>
    var slideIndex = 1;
    showDivs(slideIndex);

    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";
    }
</script>

回答1:

You can achieve this with setInterval function. Try my code

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
    .mySlides {
        display: none
    }
    
    .w3-left,
    .w3-right,
    .w3-badge {
        cursor: pointer
    }
    
    .w3-badge {
        height: 13px;
        width: 13px;
        padding: 0
    }
</style>

<body>

    <div class="w3-container">
        <h2>Slideshow Indicators</h2>
        <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
    </div>

    <div class="w3-content w3-display-container" style="max-width:800px">
        <img class="mySlides" src="http://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%">
        <img class="mySlides" src="http://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
        <img class="mySlides" src="http://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">
        <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
            <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
        </div>
    </div>

    <script>
        var slideIndex = 1;
        showDivs(slideIndex);

        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";
        }

        setInterval(function () {
            plusDivs(1);
        }, 1000);
    </script>

</body>

</html>

来源：https://stackoverflow.com/questions/41234943/how-to-make-slideshow-auto-play

标签

jquery

slideshow