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)
        })