请老师检查一下代码，谢谢

来源：6-3 编写跑马灯轮播图特效

慕圣4439042

2021-09-22 23:22:41

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 500px;
            height: 250px;
            background-color: pink;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
        }
        #box #list {
            list-style: none;
            width: 5000px;
            position: relative;
            left: 0px;
            transition: left 0.5s linear 0s; 
        }
        #box #list li {
            float: left;
            width: 500px;
            height: 250px;
            box-sizing: border-box;
            border: 1px solid black;
            text-align: center;
            line-height: 250px;
            font-size: 50px;
            color: brown;
        }
        a {
            text-decoration:none;
            color: aqua;
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            top: 50%;
            margin-top: -15px;
            border: 1px solid aqua;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
        }
        #lbtn {
            left: 20px;
        }
        #rbtn {
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <!-- 左右按钮 -->
        <a href="javascript:;" id="lbtn">←</a>
        <a href="javascript:;" id="rbtn">→</a>
    </div>

    <script>
        var box = document.getElementById("box");
        var list = document.getElementById("list");
        var lbtn = document.getElementById("lbtn");
        var rbtn = document.getElementById("rbtn");


        // 克隆第一个li到最后

        var li1 = list.firstElementChild;


        // 克隆
        var li2 = li1.cloneNode(true);

        // 上树
        list.appendChild(li2);

        // 全局变量
        // 判断是第几张图片
        var zhang = 0;

        // 锁
        var lock = true;
        rbtn.onclick = function () {
            if (!lock) return;
            if (zhang == 4) {
                list.style.transition = "left 0.5s linear 0s";
                list.style.left = -zhang * 500 - 500 + "px";
                zhang = 0;
                var timer = setTimeout(function () {
                    list.style.transition = "none";
                    list.style.left = 0 + "px";
                },500);
            } else {
                list.style.transition = "left 0.5s linear 0s";
                zhang++;
                list.style.left = -zhang * 500 + "px";

            }
            lock = false;
            setTimeout(function () {
                lock = true;
            },500);
        }


        lbtn.onclick = function () {
            if (!lock) return;
            if (zhang == 0) {
                list.style.transition = "none";
                list.style.left = -5 * 500 + "px";
                setTimeout(function () {
                    zhang = 4;
                    list.style.transition = "left 0.5s linear 0s";
                    list.style.left = -zhang * 500 + "px";
                }, 0);
            }else {
                zhang--;
                list.style.left = -zhang * 500 + "px";

            }
            lock = false;
            setTimeout(function () {
                lock = true;
            },500);
        }
    </script>
</body>
</html>

效果大概实现了，但是总感觉跟老师的思路不一样，好像漏写了什么

写回答

1回答