Js图片利用定时器自动切换（setInterval） 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Picture timed switch</title>
    <style>
        img {
            height: 460px;
            width: 1200px;
            position: absolute;
        }

        .box {
            margin: 0 auto;
            width: 1200px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 这个img图片作为背景 -->
        <img src="./img/site-hero-shoujimiaoshari.jpg" alt="">
        <img id="aa" alt="">
    </div>


    <script>
        // urls里面为四张图片的路径
        var urls = [" ./img/32xiaomidianshi.jpg",
            "./img/yongxinzuodao.jpg", "./img/xiaomiMIX3.jpg",
            "./img/thanksgiving.jpg"
        ];
        //获取img
        var aa = document.getElementById('aa');
        var i = 0;
        // 定时器setInterval(函数,时间)：每隔指定时间（毫秒）执行函数一次
        setInterval(function () {
            aa.src = urls[i];
            // 下面两种都是判读方式，如果切换到最后一张，又从第一张开始
            // i >= urls.length ? i=0: i++;
            if (i >= urls.length) {
                i = 0;
            } else {
                i++;
            }
        }, 2000);//这里间隔两秒切换一次图片
        //最终版权归我的授课老师彭老师所有！
    </script>
   
</body>

</html>

 

posted @ 2018-11-22 18:09  山水之乐也  阅读(851)  评论(0)  编辑  收藏  举报