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

来源：互联网发布：java web 异常类型编辑：程序博客网时间：2024/05/23 19:10
轮播图时网站中经常需要的东西,那我们就立刻看看轮播图的做法,直接贴代码.
<!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>
阅读全文
0 0