原生JS实现轮播图

采用原生js实现轮播图效果，具体代码如下
HTML部分

   <div class="w">
        <div class="main">
            <div class="focus">
                <a href="javascript:;" class="fl"> &lt</a>
                <a href="javascript:;" class="fr"> &gt</a>

                <ul>
                    <li>
                        <a href="javascript:;"><img src="./img/focus.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./img/focus1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./img/focus2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="./img/focus3.jpg" alt=""></a>
                    </li>
                </ul>
                <ol class="circle">
                
                </ol>
            </div>
        </div>
    </div>

css部分

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #ccc;
}
li{
    list-style: none;
    float: left;
}
.main{
    height: 455px;
     721px;
    position: absolute;
    left: 50%;
    top: 300px;
    transform: translate(-50%);
    overflow: hidden;
}


.fl,.fr{
    display: none;
     25px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: rgba(0,0,0,.3);
    position: absolute;
    top: 50%;
    z-index: 99;
}
.fl{
    float: left;
    transform: translate(0,-50%);
}
.fr{
    float: right;
    right: 0;
    transform: translate(0,-50%);
}
.focus ul{
    position: absolute;
     700%;
}

.circle{
    position: absolute;
    bottom: 20px;
    left: 60%;
}
.current {
    background-color: #fff;
}
.circle li{ 
     8px;
    height: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    cursor: pointer;   
}

js部分

    // 动画函数
        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) 
                if(obj.offsetLeft === target){
                    clearInterval(obj.timer)
                    callback && callback()
                }
                obj.style.left = obj.offsetLeft + step + 'px'
            },15)
        }

        window.addEventListener('load',function(){
            // 获取元素
            var fl = document.querySelector('.fl')
            var fr = document.querySelector('.fr')
            var focus = document.querySelector('.focus')
            // 获取宽度
            var focusWidth = focus.offsetWidth
            // 鼠标经过显示点击按钮
            focus.addEventListener('mouseenter',function(){
                fl.style.display = 'block'
                fr.style.display = 'block'
                // 鼠标进过取消自动轮播
                clearInterval(timer)
                timer = null
            })
            // 鼠标离开失去
            focus.addEventListener('mouseleave',function(){
                fl.style.display = 'none'
                fr.style.display = 'none'
                // 鼠标离开开启轮播
                timer = setInterval(function(){
                    fr.click()
                },2000)
            })

            //  根据图片数量生成对应的 导航按钮
            var ul = document.querySelector('ul')
            var ol = document.querySelector('ol')
            for(var i =0; i<ul.children.length;i++){
                var li = document.createElement('li')
                li.setAttribute('index',i)
                ol.appendChild(li)
                // 导航按钮添加点击事件
                li.addEventListener('click',function(){
                    for(var i=0;i<ol.children.length;i++){
                        ol.children[i].className = ''
                    }
                    this.className = 'current'
                    var index = this.getAttribute('index')
                    num = index 
                    circle = index
                    animate(ul, -index*focusWidth)
                })
            }
            // 设置第一个导航按钮样式
            ol.children[0].className = 'current'
            // 拷贝第一张图片插入到最后
            var first = ul.children[0].cloneNode(true)
            ul.appendChild(first)
            // 点击按钮，滚动图片
            var num = 0
            // 控制导航按钮播放
            var circle = 0
            // 节流阀
            var flag = true
            // 右侧点击按钮播放
            fr.addEventListener('click',function(){
                if(flag){
                    flag = false
                    if(num===ul.children.length-1){
                        ul.style.left = 0
                        num = 0
                    }
                    num++
                    animate(ul, -num*focusWidth,function(){
                        flag = true
                    })
                    circle++
                    if(circle == ol.children.length){
                        circle = 0
                    }
                    circleChange()
                }
            })
            // 左侧点击按钮播放
            fl.addEventListener('click',function(){
                if(flag){
                    flag = false
                    if(num == 0){
                        num = ul.children.length - 1
                        ul.style.left = - num * focusWidth +'px'
                    }
                    num--
                    animate(ul,-num*focusWidth,function(){
                        flag = true
                    })
                    circle--
                    circle = circle <0 ? ol.children.length-1 :circle
                    circleChange()
                }
            })
            // 控制导航按钮样式
            function circleChange(){
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className = ''
                }
                ol.children[circle].className = 'current'
            }
            // 开启定时器，自动播放
            var timer = setInterval(function(){
                fr.click()
            },2000)
        })