js轮播图(学习笔记)

Posted 2022-01-28 做个机灵鬼

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