如何使幻灯片自动播放? [英] How to make slideshow auto-play?

查看：20 发布时间：2021/10/26 17:10:00 jquery slideshow

本文介绍了如何使幻灯片自动播放?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这张幻灯片需要点击下一步"按钮才能播放.
基于此功能，我该怎么做才能使幻灯片自动播放?
这里是我的来源.

解决方案

您可以使用 setInterval 函数来实现这一点.试试我的代码

<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"><风格>.mySlides {显示:无}.w3-左，.w3-对，.w3-徽章{光标:指针}.w3-徽章{高度:13px；宽度:13px；填充:0}</风格><身体><div class="w3-container"><h2>幻灯片指示器</h2><p>使用按钮来指示幻灯片中有多少张幻灯片以及用户当前正在查看哪张幻灯片的示例.</p>

<脚本>var 幻灯片索引 = 1;showDivs(slideIndex);函数 plusDivs(n) {showDivs(slideIndex += n);}函数 currentDiv(n) {showDivs(slideIndex = n);}函数 showDivs(n) {变量 i;var x = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("demo");如果(n > x.length){幻灯片索引 = 1}如果 (n <1) {幻灯片索引 = x.length}for (i = 0; i < x.length; i++) {x[i].style.display = "无";}for (i = 0; i </html>

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>

解决方案

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>

这篇关于如何使幻灯片自动播放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

如何使幻灯片自动播放? [英] How to make slideshow auto-play?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何使幻灯片自动播放? [英] How to make slideshow auto-play?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭