用javascript设置图片的轮播_js轮播图速度怎么调-优快云博客

本文链接：https://blog.youkuaiyun.com/sunshine_hl/article/details/47686641

本文介绍了两种实现网页元素轮播的方法：一种使用setInterval定时器进行周期性颜色切换；另一种采用setTimeout递归调用不同函数来改变背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、setInterval轮播

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript">
    var divEle = document.getElementsByTagName("div")[0];
    var colors = ["red", "yellow", "blue"];
    var count = 0;
    setInterval(func, 1000);
    function func() {
        divEle.style.backgroundColor = colors[count++];
        if (count === 3) count = 0;
    }
</script>
</html>

二、setTimeout轮播

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript">
    var divEle = document.getElementsByTagName("div")[0];
    func1();
    function func1() {
        divEle.style.backgroundColor = "red";
        setTimeout(func2, 1000);
    }
    function func2() {
        divEle.style.backgroundColor = "yellow";
        setTimeout(func3, 1000);
    }
    function func3() {
        divEle.style.backgroundColor = "blue";
        setTimeout(func1, 1000);
    }
</script>
</html>