js轮播图(学习笔记)

window.addEventListener('load',function(){
   
   var arrowl = document.querySelector('.arrow-l');
   var arrowr = document.querySelector('.arrow-r');
   var focus = document.querySelector('.focus');
   //鼠标经过图片的时候 把左右键显示出来
   focus.addEventListener('mouseenter',function(){
       arrowl.style.display = 'block';
       arrowr.style.display = 'block';
       //鼠标经过的时候 停止自动播放
       clearInterval(timer);
       timer = null;
   })
   //鼠标离开的时候 隐藏起来
   focus.addEventListener('mouseleave',function(){
    arrowl.style.display = 'none';
    arrowr.style.display = 'none';
    //鼠标离开了又自动播放
    timer = setInterval(function(){
        //手动调用点击事件
        arrowr.click();
    },2000)
   })
   //利用动态变量添加小圆点
   var ol = document.querySelector('.circle');
   var ulImg = document.querySelector('.ulImg'); 
   for(var i = 0 ; i < ulImg.children.length; i++){
       var li = document.createElement('li');
         //自定义属性 获取小圆点的索引
         var index = li.setAttribute('index',i);
         ol.appendChild(li);
        

         //获取图片的宽度 等于盒子的宽度
         var imgOffWidth = focus.offsetWidth;
      
         //利用排他思想 点击小圆点时 小圆点背景颜色切换到当前圆点
        li.addEventListener('click',function(){
            if(true) {
                for(var j = 0; j< ol.children.length; j++){
                    //去除其他小圆点背景
                    ol.children[j].className = '';
                }
                //获取当前点击小圆的背景
                this.className = 'current';
                //点击小圆点切换图片，移动的距离等于当前圆点的索引乘于图片的宽度
                index = this.getAttribute('index');
                //把当前点击的圆点索引给num；
                num = index;
                circle = index;
               antimer(ulImg,-index * imgOffWidth)
            }
            for(var j = 0; j< ol.children.length; j++){
                //去除其他小圆点背景
                ol.children[j].className = '';
            }
            //获取当前点击小圆的背景
            this.className = 'current';
            //点击小圆点切换图片，移动的距离等于当前圆点的索引乘于图片的宽度
            index = this.getAttribute('index');
            //把当前点击的圆点索引给num；
            num = index;
            circle = index;
           antimer(ulImg,-index * imgOffWidth)
        })
   }
   //刷新时默认选中第一张图片
   ol.children[0].className = 'current';
   //深克隆第一张图片 放在最后的位置
   var first = ulImg.children[0].cloneNode(true);
   ulImg.appendChild(first);
   var num = 0;//记录图片的索引
   var circle = 0;//记录小圆点的索引
   //设置节流阀
   var flag = true;
  //设置右键点击事件
  arrowr.addEventListener('click',function(){
      if(flag){
        flag = false;
        if(num === ulImg.children.length - 1) {
            ulImg.style.left = 0;
            num = 0;
        }
        num++;
        antimer(ulImg,-num * imgOffWidth,function(){
            flag = true;
        });
        //小圆点跟随图片
        circle++;
        if(circle > ol.children.length-1) {
            circle = 0;
        }
       current();
      }
     
  })
   //左键点击事件
   arrowl.addEventListener('click',function(){
       if(flag) {
           flag = false;
        if(num === 0) {
            num = ulImg.children.length - 1;
            ulImg.style.left = -num * imgOffWidth + 'px';
          
        }
        num--;
        antimer(ulImg,-num * imgOffWidth,function(){
            flag = true;
        });
         //小圆点跟随图片
        circle--;
        if(circle < 0) {
            circle = ol.children.length -1;
        }
        current();
       }
   
})
  //封装一个函数
  function current() {
    for(var i = 0; i<ol.children.length; i++){
        ol.children[i].className = '';
    }
    ol.children[circle].className = 'current'; 
  }
  //添加一个定时器 自动滚动
  var timer = setInterval(function(){
      //手动调用点击事件
      arrowr.click();
  },2000)
})