代码收藏（七）JavaScript 轮播图

最新推荐文章于 2024-09-14 18:52:56 发布
370370370370370
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量189
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/qq_36486067/article/details/105928267
版权
代码收藏专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<!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>
        /* div {
            overflow: "hidden";
        }  */
    </style>
</head>

<body>
    <script>
        const WIDHT = 1500;
        const HEIGHT = 500;
        const LEFT = Symbol();
        const RIGHT = Symbol();
        const SPEED = 40;
        var imgSrcList = ["./img/a.png", "./img/b.png", "./img/c.png", "./img/d.png", "./img/e.png"],
            imgList = [],
            imgBox,
            button = [],
            pos = 0,
            list = [],
            direction = "",
            list = [],
            preDot,
            x = 0,
            playbool=false,
            tiem=300,
            bool = false;

        init();
        function init() {
            var wrapDiv = ce("div", {
                width: WIDHT + "px",
                height: HEIGHT + "px",
                backgroundColor: "red",
                position: "relative",
                overflow: "hidden"
            });
            document.body.appendChild(wrapDiv);
            createImgbox(wrapDiv);
            createButton(wrapDiv);
            createDotlist(wrapDiv);
            setInterval(animation, 16);
            wrapDiv.addEventListener("mouseenter",mouEvent);
            wrapDiv.addEventListener("mouseleave",mouEvent);
        }
        function createImgbox(parent) {
            imgBox = ce("div", {
                width: WIDHT * 2 + "px",
                height: HEIGHT + "px",
                backgroundColor: "rgba(0, 255, 0, 0.2)",
                position: "absolute"
            })
            for (var i = 0; i < imgSrcList.length; i++) {
                var img = ce("img", {
                    width: WIDHT + "px",
                    height: HEIGHT + "px"
                })
                img.src = imgSrcList[i];
                imgList.push(img);
            }
            parent.appendChild(imgBox);
            imgBox.appendChild(imgList[0]);
        }
        // 按钮
        function createButton(parent) {
            var arr = ["left", "right"];
            for (var i = 0; i < arr.length; i++) {
                var but = ce("img", {
                    position: "absolute",
                    top: "50%",
                    transform: "translateY(-50%)",
                    left: i === 0 ? "50px" : "none",
                    right: i === 1 ? "50px" : "none"
                })
                but.src = `./img/${arr[i]}.png`;
                parent.appendChild(but);
                button.push(but);
                but.addEventListener("click", butChange);
            }
        }
        // 圆点
        function createDotlist(parent) {
            var ul = ce("ul", {
                position: "absolute",
                bottom: "20px",
                left: "50%",
                transform: "translateX(-50%)",
                listStyle: "none"
            })
            for (var i = 0; i < imgSrcList.length; i++) {
                var li = ce("li", {
                    width: "20px",
                    height: "20px",
                    border: "2px solid red",
                    borderRadius: "50%",
                    float: "left",
                    marginLeft: i === 0 ? "0" : "15px"
                })
                ul.appendChild(li);
                list.push(li);
            }
            parent.appendChild(ul);
            changDot();
            ul.addEventListener("click", listChange)
        }
        //按钮切换
        function butChange(e) {
            if (bool) return;
            if (e.target === button[0]) {
                pos--;
                if (pos < 0) pos = imgList.length - 1;
                direction = LEFT;
            } else {
                pos++;
                if (pos > imgList.length - 1) pos = 0;
                direction = RIGHT;
            }
            nextImg(direction);
            changDot();
        }
        //圆点切换
        function listChange(e) {
            if (bool) return;
            if (e.target.constructor !== HTMLLIElement) return;
            var index = list.indexOf(e.target);
            if (index === pos) return;
            direction = index > pos ? RIGHT : LEFT;
            pos = index;
            nextImg(direction);
            changDot();
        }
        //圆点点击颜色改变
        function changDot() {
            if (preDot) {
                preDot.style.backgroundColor = "rgba(0, 0, 0, 0)";
            }
            preDot = list[pos];
            preDot.style.backgroundColor = "red";
        }
        //加载下一张
        function nextImg(direction) {
            if (direction === LEFT) {
                imgBox.insertBefore(imgList[pos], imgBox.firstElementChild);
                imgBox.style.left = -WIDHT + "px";
                x = -WIDHT;

            } else if (direction === RIGHT) {
                imgBox.appendChild(imgList[pos]);
                x = 0;
            }
            bool = true;
        }

        //删除下一张
        function remotImg() {
            if (!bool) return;
            if (direction === LEFT) {
                x += SPEED;
                if (x >= 0) {
                    bool = false;
                    x = 0;
                    imgBox.lastElementChild.remove();
                }
                imgBox.style.left = x + "px";
            } else if (direction === RIGHT) {
                x -= SPEED;
                if (x <= -WIDHT) {
                    bool = false;
                    x = 0;
                    imgBox.firstElementChild.remove();
                }
                imgBox.style.left = x + "px";
            }

        }
        function animation() {
            remotImg();
            autoplay();
        }
        //自动播放
        function mouEvent(e){
            if(e.type==="mouseenter"){
                playbool=true;
                time=300;
            }else{
                playbool=false;
            }
        }
        function autoplay(){
            if(playbool)return;
            tiem--;
            if(tiem>0)return;
            tiem=300;
            var evt=new MouseEvent("click");
            button[1].dispatchEvent(evt);
        }
        function ce(type, style) {
            var elem = document.createElement(type);
            Object.assign(elem.style, style);
            return elem;
        }
    </script>
</body>

</html>