用javascript设置图片的轮播

最新推荐文章于 2022-07-07 13:54:48 发布

sunshine_hl

最新推荐文章于 2022-07-07 13:54:48 发布

阅读量626

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/sunshine_hl/article/details/47686641

版权

web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一、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>