JavaScript轮播图

最新推荐文章于 2024-08-27 13:38:21 发布

不会咋办

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量122

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_43201652/article/details/127400606

版权

<!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;
            list-style: none;
        }

        #carousel {
            width: 480px;
            height: 280px;
            margin: 50px auto;
            border: 8px solid skyblue;
            position: relative;
            overflow: hidden;
        }

        #carousel img {
            width: 480px;
            height: 280px;
        }

        #carousel ul {
            width: 3000px;
            height: 280px;
            position: absolute;
            left: 0;
        }

        #carousel li {
            float: left;
        }

        .Pager {
            position: absolute;
            left: 50%;
            bottom: 15px;
            transform: translate(-50%);
        }

        .Pager>a {
            display: block;
            float: left;
            margin: 0 5px;
            width: 12px;
            height: 12px;
            background-color: rgba(0, 0, 0, .3);
            border-radius: 50%;
            cursor: pointer;
        }

        .Pager>.hover {
            background-color: rgb(25, 199, 25);
        }
    </style>
</head>

<body>
    <div id="carousel">
        <ul>
            <li><img src="./img/a.jpeg" alt=""></li>
            <li><img src="./img/b.jpeg" alt=""></li>
            <li><img src="./img/c.jpeg" alt=""></li>
            <li><img src="./img/d.jpeg" alt=""></li>
            <li><img src="./img/e.jpeg" alt=""></li>
        </ul>
        <div class="Pager">

        </div>
    </div>
    <script>
        var pager = document.querySelector(".Pager")
        var liNodes = document.querySelectorAll("#carousel li")
        for (var i = 0; i < liNodes.length; i++) {
            var aNodes = document.createElement("a")
            aNodes.setAttribute("index", i)
            if (i == 0) {
                aNodes.className = "hover"
            }
            pager.appendChild(aNodes)
        }
        var ulNode = document.querySelector("#carousel>ul")
        var flag = true
        pager.addEventListener("click", function (e) {
            clearInterval(ulNode.myinter)

            if (e.target.nodeName == "A") {
                var myindex = e.target.getAttribute("index")
                var step = -(myindex * 480)
                // ulNode.style.left = step + "px"
                if (flag) {
                    slow(ulNode, step, function () {
                        flag = true
                    })
                    for (var j = 0; j < pager.children.length; j++) {
                        pager.children[j].className = ""
                    }
                    pager.children[myindex].className = "hover"
                }
            } else {
                return
            }
        })
        var tindex = 0
        ulNode.myinter = setInterval(function () {
            var tstep = -(tindex * 480)
            // ulNode.style.left=tstep+"px"
            if (flag) {
                slow(ulNode, tstep, function () {
                    flag = true
                })
                for (var j = 0; j < pager.children.length; j++) {
                    pager.children[j].className = ""
                }
                pager.children[tindex].className = "hover"
            }


            tindex++
            if (tindex == liNodes.length) {
                tindex = 0
            }
        }, 3000)

        function slow(obj, aim, callback) {
            flag = false
            obj.sInter = setInterval(function () {
                var offset = obj.offsetLeft
                var step = (aim - offset) / 10
                step > 0 ? step = Math.ceil(step) : step = Math.floor(step)
                if (obj.offsetLeft == aim) {
                    clearInterval(obj.sInter)
                    callback && callback()
                } else {
                    obj.style.left = offset + step + "px"

                }
            }, 50)

        }
    </script>
</body>

</html>