js实现--自动轮播图

最新推荐文章于 2024-04-13 01:40:39 发布

꧁এ悲宸๓₯㎕

最新推荐文章于 2024-04-13 01:40:39 发布

阅读量207

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_44889894/article/details/110880867

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js-实现循环播放

效果展示：


 1. 点击“开启循环定时器”，启动定时器，图片进行循环播放 
 2. 点击“清楚循环定时器”，图片循环播放停止

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="start2()">开始循环定时器</button>
<button onclick="stop2()">清除循环定时器</button>
<br>
<div style="border: 1px solid blue;height: 400px" id="div2"/>
<br>
</body>
<script>
    let div2 = document.getElementById("div2");
    let count=0;
    function start2() {
        let arr = ["banner_1", "banner_2", "banner_3"]
        s2 = setInterval(function () {
            if (count == 3) {
                count = 0
            }
            div2.style.backgroundImage = "url(img/"+arr[count]+".jpg)";
            count++
        }, 1000)
    }
    function stop2() {
        clearInterval(s2)
    }
</script>
</html>