跑马灯轮播图

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            overflow: hidden;
            position: relative;
            width: 1226px;
            height: 580px;
            margin: 200px auto 0;
        }

        #wrap .imglist {
            position: relative;
            left: 0;
            display: flex;
            width: 100%;
            height: 100%;
            transition: 0.7s ease;
        }

        #wrap .imglist img {
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        #wrap a {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            display: block;
            width: 40px;
            height: 70px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            user-select: none;
            font-size: 30px;
            text-align: center;
            line-height: 70px;
            text-decoration: none;
        }
        .button{
            position: absolute;
            right: 30px;
            bottom: 50px;
            width: 100px;
        }
        .button>ul{
            margin: 0;
            padding: 0;
            cursor: pointer;
            list-style: none;
            width: 100%;
            display: flex;
        }
        .button>ul>li{
            width: 20px;
            
            border-radius: 50%;
            height: 20px;
            background-color: #dfe4ea;
        }
        #wrap a.left {
            left: 0;
        }

        #wrap a.right {
            right: 0;
        }
    </style>

<div id="wrap">
        <div class="imglist">
            <img src="" alt="" />
            <img src="" alt="" />
            <img src="" alt="" />
            <img src="" alt="" />
            <img src="" alt="" />
        </div>
        <div class="button">
            <ul>
                <li data_n="0"></li>
                <li data_n="1"></li>
                <li data_n="2"></li>
                <li data_n="3"></li>
                <li data_n="4"></li>
            </ul>
        </div>
        <div class="arrow">
            <a href="javascript:;" class="left">&lt;</a>
            <a href="javascript:;" class="right">&gt;</a>
        </div>
    </div>

 <script>
       
        // 使用IIFE封成轮播图模块
        (function () {
            let owarp = document.getElementById("wrap");
            let oimglist = document.querySelector("#wrap .imglist");
            let oleft = document.querySelector(".arrow .left");
            let oright = document.querySelector(".arrow .right");
            let obutton = document.querySelectorAll("#wrap>.button>ul>li");
            let oklone = oimglist.firstElementChild.cloneNode(); 
            oimglist.appendChild(oklone);
            obutton[0].style.backgroundColor="#747d8c";
            let index = 0;
            let lock = true;
            // 节流
            oleft.onclick = function(){
                if(!lock) return;
                aleft();
                lock =false;
                    setTimeout(function(){
                        lock = true;
                    },700);
            } 
            oright.onclick = function(){
                if(!lock) return;
                // oimglist.style.transtion = "0.7s ease";
                aright();
                lock =false;
                    setTimeout(function(){
                        lock = true;
                    },700);
            } 
        
            //   
            
            //左按钮
            function aleft() {
                
                index++;
                button_banner();
                oimglist.style.transition = "0.7s ease";
                oimglist.style.left = -index * 1226 + "px";
                if (index === 5) {
                    setTimeout(function () {
                        oimglist.style.transition = "none";
                        oimglist.style.left = 0 + "px";
                        index = 0;
                    }, 700)
                }
                
            };
            //右按钮
            function aright() {
                // oimglist.style.transtion = "0.7s ease";
                if (index === 0) {
                    oimglist.style.transition = "none";
                    index = 5;
                   
                    oimglist.style.left = -index * 1226 + "px";
                    
                    setTimeout(function () {
                        oimglist.style.transition = "0.7s ease";
                        index--;
                        oimglist.style.left = -index * 1226 + "px";
                    }, 0);
                    setTimeout(function () {
                        obutton[0].style.backgroundColor="#dfe4ea";
                        obutton[4].style.backgroundColor="#747d8c";
                        obutton[4].style.transition = "0.7s ease";
                    }, 0);
                } 
                else {

                    index--;
                    button_banner();
                    oimglist.style.transition = "0.7s ease";
                    oimglist.style.left = -index * 1226 + "px";
                   
                }
            };

            //自动轮播
            m = setInterval(aleft, 2500);
            owarp.onmouseover = function () {
                clearInterval(m);
            };
            owarp.onmouseout = function () {
                clearInterval(m);
                m = setInterval(aleft, 2500);
            };
            //按钮显示
            function button_banner(){
                if(index<=5){
                    (function(){
                        oimglist.style.transtion = "none";
                    for(i=0;i<obutton.length;i++){
                        obutton[i].style.backgroundColor ="#dfe4ea";
                        obutton[i].style.transition = "0.7s ease";
                        }
                    obutton[index%5].style.transition = "0.7s ease";
                    obutton[index%5].style.backgroundColor="#747d8c";
                })();
                }
            }
            //页面点击换图
            for(i=0;i<obutton.length;i++){
                obutton[i].onclick = function(){
                    for(j=0;j<obutton.length;j++){
                        obutton[j].style.backgroundColor ="#dfe4ea";
                    }
                    let n = Number(this.getAttribute("data_n")) ;
                    index = n;
                    oimglist.style.transition = "none";
                    this.style.backgroundColor ="#747d8c";
                    oimglist.style.left = -index * 1226 + "px";
                    
                }
                
                   
               
                
            

            }
            
        })();
            
    </script>