JavaScript第六天定时器与函数封装

最新推荐文章于 2023-11-01 16:02:34 发布

原创最新推荐文章于 2023-11-01 16:02:34 发布 · 261 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

学习专栏收录该内容

45 篇文章

订阅专栏

本文探讨JavaScript中的定时器，包括setInterval用于重复执行任务，setTimeout进行延迟单次执行，以及如何使用clearInterval和clearTimeout来清除定时器。特别地，文章结合实例介绍了在轮播图中的应用。

定时器

分为两类
setIntervar
重复执行或者叫间歇执行，隔某个时间就执行一次。
srtTimeout
延迟执行，延迟某个特定的时间开始执行，只执行一次。

清除定时器
clearInterval(intervalId)
clearTimeout(intervalId)

轮播图

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        img {
            width: 500px;
            height: 400px;
            float: left;
        }

        .box {
            text-align: center;
            position: relative;
            left: 200px;
            width: 500px;
            height: 400px;
            overflow: hidden;
        }

        #top {
            position: absolute;
            width: 500px;
            background-color: rgba(0, 0, 0, .2);
            font-size: 20px;
            color: #fff;
            top: 0;
            left: 0;
            margin: 0 auto;
        }

        .left {
            display: inline-block;
            position: absolute;
            top: 180px;
            left: 0px;
            width: 30px;
            height: 50px;
            color: black;
            background-color: rgba(0, 0, 0, .5);
        }

        .right {
            display: inline-block;
            position: absolute;
            color: black;
            top: 180px;
            right: 0px;
            width: 30px;
            height: 50px;
            background-color: rgba(0, 0, 0, .5);
        }

        .down {

            position: absolute;
            width: 500px;
            background-color: rgba(0, 0, 0, .2);
            font-size: 20px;
            color: #fff;
            bottom: 0;
            left: 0;
            margin: 0 auto;
        }

        .yuan {
            position: absolute;
            bottom: 25px;
            width: 500px;
            margin: 0 auto;
        }

        p span {
            display: inline-block;

            border: 10px solid white;
            border-radius: 50%;
        }

        .red {
            border-color: #f00;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../img/1.jpg" alt="" id="tu">

        <p id="top">1/4</p>
        <button class="left">
            < </button> <button class="right"> >
        </button>
        <p class="yuan">
            <span class="red"></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
        <p class="down">风景1</p>
    </div>

    <script>

        var image = document.getElementsByTagName("img")[0];
        var sp = document.getElementsByTagName("span");
        var top1 = document.getElementById("top");
        var down = document.getElementsByClassName("down")[0];
        var tu = document.getElementById("tu")
        tu.onmouseover=function(){
            clearInterval(timer)
        }
        tu.onmouseout=function(){
            timer=setInterval(autonext, 1000)
        }
        // var n = 1;
        var timer = setInterval(autonext, 1000);
        function autonext() {
            a++;
            if (a > 4) {
                a = 1;
            }
            tu.src = "../img/" + a + ".jpg";
            top1.innerHTML = a + "/4";
            down.innerHTML = "风景" + a
            for (var i = 0; i < sp.length; i++) {
                sp[i].className = ""
            }
            sp[a - 1].className = "red"
        }
        // 圆圈
        for (var i = 0; i < sp.length; i++) {
            sp[i].index = i
            sp[i].onmouseover = function () {
                for (var i = 0; i < sp.length; i++) {
                    sp[i].className = "";

                }
                a = this.index + 1
                this.className = "red";
                image.src = "../img/" + (this.index + 1) + ".jpg";
                top1.innerHTML = this.index + 1 + "/4";
                down.innerHTML = "风景" + (this.index + 1);

            }
        }
        // 按钮

        var left = document.getElementsByClassName("left")[0];
        var right = document.getElementsByClassName("right")[0];
        var a = 1;

        left.onclick = function () {
            a--;
            if (a < 1) {
                a = 4;
            }
            tu.src = "../img/" + a + ".jpg";
            top1.innerHTML = a + "/4";
            down.innerHTML = "风景" + a
            for (var i = 0; i < sp.length; i++) {
                sp[i].className = "";

            }
            sp[a - 1].className = "red"
        }
        right.onclick = function () {
            a++;
            if (a > 4) {
                a = 1;
            }
            tu.src = "../img/" + a + ".jpg";
            top1.innerHTML = a + "/4";
            down.innerHTML = "风景" + a
            for (var i = 0; i < sp.length; i++) {
                sp[i].className = ""
            }
            sp[a - 1].className = "red"

        }

    </script>
</body>

</html>