广告栏图片切换效果

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 1125px;
            height: 352px;
            margin: 50px auto;
        }

        #box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="images/img1.jpg" alt="">
    </div>

    <script>
        var box = document.getElementById('box');
        var img = document.getElementsByTagName('img')[0];
        var arr = ['images/img1.jpg', 'images/img2.jpg', 'images/img3.jpg', 'images/img4.jpg'];
        var num = 0;
        var timer = null;

        // 开启自动切换定时器
        timer = setInterval(auto, 1000);
        
        function auto() {
            num++;
            if (num > arr.length - 1) {
                num = 0;
            }
            img.src = arr[num]
        }

        // 盒子划过事件
        box.onmouseover = function () {
            clearInterval(timer);
        }

        // 盒子划出事件  再度开启 同一个 定时器
        box.onmouseout = function () {
            timer = setInterval(auto, 2000);
        }

    </script>
</body>

</html>

 

效果

posted @ 2020-07-03 13:43  石海莹  阅读(161)  评论(0)  编辑  收藏  举报