原生JS轮播图

                <div class="focus">
                    <!-- 左侧按钮 -->
                    <a href="javascript:void(0);" class="arrow-l"> &lt; </a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:void(0);" class="arrow-r"> &gt; </a>
                    <ul>
                        <li><img src="upload/focus.png"></li>
                        <li><img src="upload/focus1.jpg"></li>
                        <li><img src="upload/focus2.jpg"></li>
                        <li><img src="upload/focus3.jpg"></li>
                    </ul>
                    <ol class="circle"></ol>
                </div>

window.addEventListener(‘load‘,function(){
    //1.获取元素
    var arrow_l = document.querySelector(‘.arrow-l‘);
    var arrow_r = document.querySelector(‘.arrow-r‘);
    var focus = document.querySelector(‘.focus‘);
    
    //2.鼠标经过显示左右按钮
    focus.addEventListener(‘mouseenter‘,function(){
        arrow_l.style.display = ‘block‘;
        arrow_r.style.display = ‘block‘;
        //停止定时器,并清空
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener(‘mouseleave‘,function(){
        arrow_l.style.display = ‘none‘;
        arrow_r.style.display = ‘none‘;
        timer = setInterval(function(){
            //手动调用点击事件
            arrow_r.click();
        },2000);
    });
    
    //3.动态生成圆圈
    var ul = focus.querySelector(‘ul‘);
    var ol = focus.querySelector(‘ol‘);
    for(var i=0; i<ul.children.length; i++){
        var li = document.createElement(‘li‘);
        li.setAttribute(‘index‘,i);
        //给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和circle
            num = circle = index;
            animate(ul, -index * focus.offsetWidth);
        });
        ol.appendChild(li);
    }
    //第一个小圆点默认选中状态
    ol.children[0].className = ‘current‘;
    
    //4. 克隆第一张图片(li)放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    
    //5.点击右侧按钮,滚动一张图片
    var num = 0;
    //circle 控制小圆点的播放
    var circle = 0;
    arrow_r.addEventListener(‘click‘,function(){
        //判断是否最后一张,则返回第一张图片位置
        if(num == ul.children.length-1){
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focus.offsetWidth);
        
        //小圆点跟随移动
        circle++;
        circle = circle == ol.children.length? 0 : circle;
        //调用小圆点变换函数
        circleChange();
    });
    
    //6.左侧按钮实现
    arrow_l.addEventListener(‘click‘,function(){
        //判断是否第一张图片,返回最后一张图片位置
        if(num == 0){
            num = ul.children.length-1;
            ul.style.left = -num * focus.offsetWidth + ‘px‘;
        }
        num--;
        animate(ul, -num * focus.offsetWidth);
        
        //小圆点跟随移动
        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‘;
    }
    
    //7.自动播放
    var timer = setInterval(function(){
        //手动调用点击事件
        arrow_r.click();
    },2000);
});