js實現完整輪播

1、封裝一個簡單的動畫函數

        function animate(obj,target,callback){       
            clearInterval(obj.timer);//清除定時器防止定時器重復添加
            obj.timer=setInterval(function(){
                var step=(target-obj.offsetLeft)/10; //定義一個步長，實現速度變化
                step=step>0 ? Math.ceil(step) : Math.floor(step); //解決取整問題的bug
                if(obj.offsetLeft==target){//判斷運動距離與目標距離相等，停止運動
                    clearInterval(obj.timer);
                    if(callback){
                        callback();//如果有回調函數，執行回調函數
                    }
                }
                obj.style.left=obj.offsetLeft+step+'px'; //實現運動
            },15);
        }

2、頁面結構

<div class="focus">
        <ul class="image">
            <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner4.jpg" alt=""></a></li>
        </ul>
        <ul class="round"></ul>
        <div class="button">
            <a href="javascript:;" class="prev">上一頁</a>
            <a href="javascript:;" class="next">下一頁</a>
        </div>
    </div>

3、css樣式

*{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: white;
        }
        img{
            display: block;
        }
        .focus{
            width: 730px;
            margin: 50px auto;
            /* border: 1px solid gray; */
            position: relative;
            overflow: hidden;
        }
        .image{
            width: 2920px;
            height: 454px;
            position: relative;
        }
        .image li{
            float: left;
        }
        .button{
            position: absolute;
            display: none;
            top: 50%;
            margin-top: -20px;
        }
        .button a{
            display: inline-block;
            line-height: 40px;
            width: 30px;
            height: 40px;
            text-align: center;
            background: black;
            opacity: .4;
        }
        .button a:hover{
            color: red;
        }
        .next{
            position: absolute;
            left: 700px;
            top: 50%;
            margin-top: -20px; 
        }
        .round{
            position: absolute;
            top: 430px;
            margin-left: 321px;
        }
        .round li{
            width: 10px;
            height: 10px;
            border: 1px solid gray;
            border-radius: 50%;
            float: left;
            margin-left: 10px;
        }
        .clear{
            clear: both;
        }
        .current{
            background: black;
        }

4、js實現輪播功能

        window.addEventListener('load',function(){
            var focus=document.querySelector('.focus');
            var button=document.querySelector('.button');
            var prev=document.querySelector('.prev');
            var next=document.querySelector('.next');
            var focusWidth=focus.offsetWidth;//獲取輪播區域的寬度
            
            focus.addEventListener('mouseover',function(){
                button.style.display='block';
                clearInterval(timer);
                timer=null;
            })//設置鼠標進入，顯示前進后退按鈕，且關閉定時器，停止滾動
            focus.addEventListener('mouseout',function(){
                button.style.display='none';
                timer=setInterval(function(){
                    next.click();
                },2000)
            })//設置鼠標離開，隱藏前進后退按鈕，且開啟定時器，開始滾動

            var image=document.querySelector('.image');
            var round=document.querySelector('.round');
            var length=image.children.length;
            for(var i=0;i<length;i++){
                var li=document.createElement('li');
                round.appendChild(li);//動態添加小圓圈，小圓圈個數跟隨圖片個數變化
                li.setAttribute('index',i);//設置自定義屬性index
            }
            round.children[0].className='current';//添加第一個小圓圈默認樣式
            
            var roundLi=round.children;
            for(var i=0;i<roundLi.length;i++){
                roundLi[i].addEventListener('click',function(){
                    for(var i=0;i<roundLi.length;i++){////小圓圈點擊事件，改變顏色和圖片位置
                        roundLi[i].className='';
                    }//排他思想
                    this.className='current';
                    var index=this.getAttribute('index');
                    num=index;
                    circle=index;
                    var focusWidth=focus.offsetWidth;
                    animate(image,-index*focusWidth);//利用index計算圖片運動的距離，實現點擊小圓圈的效果
                })
            }
            //使用克隆增加一個li放在ul的最后面，實現無縫滾動的視覺效果
            var first=image.children[0].cloneNode(true);//深克隆
            image.appendChild(first);

            var lengths=image.children.length;
            image.style.width=lengths*focusWidth+'px';
            //鼠標點擊前進按鈕的點擊事件
            var num=0;
            var circle=0;//控制小圓圈的變化
            var flag=true;
            next.addEventListener('click',function(){
                if(flag){ //flag節流閥防止動畫運行過快
                    flag=false;
                    if(num==lengths-1){
                        image.style.left=0;
                        num=0;//點擊切換到最后一張的時候，位置拉回原始位置，重新賦值num
                    }
                    num++;
                    animate(image,-focusWidth*num,function(){
                        flag=true;
                    });
                    circle++;
                    if(circle==length){
                        circle=0;
                    }
                    circleChange();
                }
            })
            //鼠標點擊后退按鈕的點擊事件
            prev.addEventListener('click',function(){
                if(flag){
                    flag=false;
                    if(num==0){
                        num=lengths-1;
                        image.style.left=-num * focusWidth +'px'; 
                    }
                    num--;
                    animate(image,-focusWidth*num,function(){
                        flag=true;
                    });
                    circle--;
                    if(circle<0){
                        circle=roundLi.length-1;
                    }
                    circleChange();
                }
            })
            //把公共部分小圓圈變化封裝成函數
            function circleChange(){
                for(var i=0;i<roundLi.length;i++){
                        roundLi[i].className='';
                    };
                roundLi[circle].className='current';  
            }
            //設置一個定時器
            var timer=setInterval(function(){
                next.click();//每兩秒執行一次next的點擊函數，實現定時輪播切換
            },2000)
        })