js轮播图-自动,手动,小圆点

轮播图时网站中经常需要的东西,那我们就立刻看看轮播图的做法,直接贴代码.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="utils.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            background: #ffffff;
        }

        #wrap {
            width: 300px;
            height: 150px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        #list {
            width: 1200px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 0;
            transition: all 0.5s linear;
        }

        #list img {
            float: left;
            width: 300px;
            height: 150px;
        }

        #tab {
            position: relative;
            display: none;
        }

        #tab a {
            position: absolute;
            top: 50%;
            color: #ffffff;
            line-height: 50px;
            padding: 0 10px;
            background: rgba(0, 0, 0, 0.6);
            margin-top: 55px;
            cursor: pointer;
        }

        #left-btn {
            left: 0;
        }

        #right-btn {
            right: 0;
        }

        #btn {
            width: 300px;
            position: absolute;
            left: 0;
            bottom: 0;
            text-align: center;
        }

        .btn a {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .red {
            background: red;
        }

        .white {
            background: white;
        }

    </style>
    <script>
        window.onload = function () {
            //这里封装了一个$函数,用来获取id,$相当于document.getElementById()
            let tab = $("tab");
            let leftBtn = $("left-btn");
            let rightBtn = $("right-btn");
            let list = $("list");
            let btn = $("btn");
            let tabs = tab.getElementsByTagName("a");
            let btns = btn.getElementsByTagName("a");

            let index = 0;//记录当前是第几张图片
            let time = null;//记录定时器

            //鼠标进入list时,tab显示
            list.onmouseenter = function () {
                tab.style.display = "block";
                clear();//清除定时器
            };

            //鼠标离开list时,tab隐藏
            list.onmouseleave = function () {
                tab.style.display = "none";
                start();//启动定时器
            };

            //遍历tabs,给每个tab加上进入离开事件,否则tab会跳动
            for (let i = 0; i < tabs.length; i++) {
                tabs[i].onmouseenter = function () {
                    tab.style.display = "block";
                    clear();//清除定时器
                };
                tabs[i].onmouseleave = function () {
                    tab.style.display = "none";
                    start();//启动定时器
                };
            }

            //点击右按钮往右走
            rightBtn.onclick = function () {
                rightMove();
            };

            //点击左按钮往左走
            leftBtn.onclick = function () {
                leftMove();
            };

            //启动定时器,自动播放
            start();

            //点击小圆点,切换图片
            for (let i = 0; i < btns.length; i++) {
                btns[i].onmouseenter = function () {
                    clear();//鼠标移入小圆点时清除定时器
                    index = i;
                    list.style.left = -index * 300 + "px";
                    redBtns(index);
                };
                btns[i].onmouseleave = function () {
                    start();//鼠标离开小圆点时开启定时器
                }
            }


            /**
             * 启动定时器
             * **/
            function start() {
                time = setInterval(function () {
                    rightMove();
                }, 1000);
            }


            /**
             * 清除定时器
             * */
            function clear() {
                clearInterval(time);
            }

            /**
             * 向左移动
             **/

            function leftMove() {
                //当index为-1时,设为3回到最后一张图,否则会空白
                index--;
                if (index === -1) {
                    index = 3
                }
                list.style.left = -index * 300 + "px";

                redBtns(index);//小圆点的滚动
            }

            /**
             * 向右移动
             */
            function rightMove() {
                index++;
                //当index为4是,设为0回到第一张图,否则会显示空白
                if (index === 4) {
                    index = 0;
                }
                list.style.left = -index * 300 + "px";

                redBtns(index);//小圆点的滚动

            }

            /**
             * 小红点的滚动
             * @param index
             */
            function redBtns(index) {
                //遍历循环所有的小圆点,看当前的index和i的值是否相等
                for (let i = 0; i < btns.length; i++) {
                    if (i === index) {
                        btns[i].className = "red";
                    } else {
                        btns[i].className = "white";
                    }
                }
            }

        }

    </script>
</head>
<body>
<div id="wrap">

    <div id="list">
        <img src="img/img1.jpg" alt="">
        <img src="img/img2.jpg" alt="">
        <img src="img/img3.jpg" alt="">
        <img src="img/img4.jpg" alt="">
    </div>
    <div id="tab">
        <a id="left-btn" href="javascript:">&lt;</a>
        <a id="right-btn" href="javascript:">&gt;</a>
    </div>
    <div id="btn" class="btn">
        <a class="red" href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
    </div>
</div>
</body>
</html>
js轮播图-自动,手动,小圆点

猜你喜欢
