轮播图制作

功能需求：

           1.鼠标经过轮播图，左右按钮显示，离开隐藏左右按钮

            2.点击右侧按钮一次，图片向左播放一张，以此类推，左侧按钮同理。

            3.图片播放的同时，下面小圆圈模块跟随一起变化

            4.点击小圆圈，可以播放相应图片。

            5.鼠标不经过轮播图，轮播图也会自动播放

            6.鼠标经过，轮播图模块，自动播放停止。

js代码如下：

 var both = document.querySelector('.both');
        var ul = both.querySelector('ul');
        var ol = both.querySelector('.dian');
        var leftbtn = document.querySelector('.leftbtn');
        var rightbtn = document.querySelector('.rightbtn');
        var tuWidth = both.offsetWidth;
        var cricle = 0;
        var num = 0;
        //1.功能1 鼠标经过显示按钮 鼠标离开按钮消失
        both.addEventListener('mouseenter', function () {
            leftbtn.style.display = 'block';
            rightbtn.style.display = 'block';
            //停止计时器
            clearInterval(timer);
            timer = null;
        })
        both.addEventListener('mouseleave', function () {
            leftbtn.style.display = 'none';
            rightbtn.style.display = 'none';
            timer = setInterval(function(){
            //手动点击事件
            rightbtn.click();
        },2000);
        
        })
        //功能2 下面小圆等于 图片数 。小圆动态生成。
        for (var i = 0; i < ul.children.length ; i++) {
            //创建一个li
            var li = document.createElement('li');

            //把li插入到ol
            ol.appendChild(li);
            //记录当前小圆圈的索引号，通过自定义属性来做
            ol.children[0].className = 'current';
            li.setAttribute('index', i);
            // 功能3  实现鼠标点击其中一个小圆时 设置current类名 ，没有点击的则取消current类名
            li.addEventListener('click', function () {
                for (i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                //功能4 当点击一个小圆点时，图片显示对应小圆点的图片
                //ul 移动距离为小圆圈索引号* 图片宽度。
                var index = this.getAttribute('index');//小圆索引号
                //当点击了某个li ，num获得索引号
                num =  index ;
                cricle  = index;
                animate(ul, -index * tuWidth);
            })

        }
        //克隆第一张图片放在最后 为功能5做铺垫
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
         // 功能5 点击右侧按钮，图片滚动一张
    
        rightbtn.addEventListener('click', function () {
            if(num == ul.children.length -1){
               ul.style.left = 0;
               num= 0;
            }
            num++;
            animate(ul, -num * tuWidth);
            //声明一个变量使圆和图片一起变化。
          cricle++;
          if(cricle == ol.children.length){
              cricle = 0;
          }
          for (i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[cricle].className = 'current';
        })
        leftbtn.addEventListener('click', function () {
            if(num == 0){
                num= ul.children.length-1;
               ul.style.left = -num *tuWidth +'px';
            }
            num--;
            animate(ul, -num * tuWidth);
            //声明一个变量使圆和图片一起变化。
          cricle--;
          if(cricle < 0){
              cricle =  ol.children.length -1;
          }
          for (i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                ol.children[cricle].className = 'current';
        })
        //自动播放功能
        var timer = setInterval(function(){
            //手动点击事件
            rightbtn.click();
        },2000);