js轮播图 

<!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;
        }

        ul {
            list-style-type: none;
        }

        img {
            vertical-align: top;
        }

        .box {
            width: 730px;
            height: 454px;
            margin: 100px auto;
            /* padding: 5px; */
            /* border: 1px solid #ccc; */
        }

        .inner {

            width: 730px;
            height: 454px;
            /* background-color: pink; */
            overflow: hidden;
            position: relative;
        }

        .inner ul {
            width: 3650px;
            position: absolute;
        }

        .inner ul li {

            float: left;

        }

        .square {
            position: relative;
            left: 600px;
            top: 430px;

        }

        span {

            display: inline-block;
            cursor: pointer;
            width: 20px;
            height: 20px;
            text-align: center;
            background-color: #fff;
        }

        .current {

            background-color: #ff4f00;
            color: white;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="inner">
            <!--相框-->
            <ul id="allimg">
                <li><a><img src="img/01.jpg" alt=""></a></li>
                <li><a><img src="img/02.jpg" alt=""></a></li>
                <li><a><img src="img/03.jpg" alt=""></a></li>
                <li><a><img src="img/04.jpg" alt=""></a></li>
                <li><a><img src="img/05.jpg" alt=""></a></li>
            </ul>
            <div class="square" id="square">
                <ul>
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </ul>
            </div>
        </div>
    </div>


    <script>
        var timeId;
        let boxObj = document.getElementById("box");
        let Img_width = boxObj.offsetWidth;
        //总体图片ul
        let Objul = document.getElementById('allimg');

        //按钮
        let btn = document.getElementsByTagName("span");
        for (let i = 0; i < btn.length; i++) {
            btn[i].setAttribute("index", i);

            btn[i].onmouseover = function () {

                for (let j = 0; j < btn.length; j++) {
                    btn[j].className = "";
                }
                this.className = "current";
                let index = this.getAttribute("index");
                clearInterval(timeId);
                animation(Objul, -index * Img_width);

            }
        }


        function animation(element, target) {
            clearInterval(timeId);
            let num = element.offsetLeft;
            timeId = setInterval(() => {

                let temp = target > num ? 80 : -80;
                num += temp;
                if (Math.abs(target - element.offsetLeft) <= Math.abs(temp)) {
                    element.style.left = target + "px";
                    clearInterval(timeId);
                }
                else {
                    element.style.left = num + "px";
                }
            }, 50);
        }

    </script>
</body>

</html>
posted @ 2021-10-20 22:18  yongerbingxuan  阅读(22)  评论(0)    收藏  举报