封装轮播图学轮子不如造轮子

2018-07-06 01:49:14来源：博客园阅读 ()

CSS 部分代码

<style type="text/css">
     ul{
       padding:0;
       margin:0;
       list-style:none;
     }
     img{
       vertical-align:top;
     }
      .slider{
         width:490px;
         height:170px;
         margin:100px auto;
         border:1px solid red;
         padding:5px;
         position:relative;
      }
      .box{
       
       width:100%;
       height:100%;
       position:relative;
       overflow:hidden;
      }
      .box ul{
         width:900%;
         height:100%;
         position:absolute;
         left:-490px;
         top:0;

      }
      .box ul li{
        float:left;
      }
    
    .slider .circles{
      position:absolute;
      left:50%;
      margin-left:-70px;
      bottom:10px;

    }
    .slider .circles ul li{
       width:18px;
       height:18px;
       background:#ff6600;
       text-align:center;
       line-height:18px;
       float:left;
       margin-right:10px;
       cursor:pointer;
    }
    .oldColor{
    
      background:#ff6600!important;
    
    }

    .newColor{
       background:#ff0000!important;
    }

    .slider a{
       text-decoration:none;
       font-size:20px;
       height:30px;
       width:30px;
       position:absolute;
       top:50%;
       margin-top:-15px;
       background:rgba(0,0,0,0.3);
       line-height:30px;
       text-align:center;
       color:#eee;

    }
    .slider a:hover{
       background:rgba(0,0,0,0.7);
    }

    .slider .next{
     right:5px;
    }

    .slider .prev{
     left:5px;
    }

HTML部分

<body>
  <div class="slider">
        <div class="box">
           <ul>
              <li><img src="images/05.jpg" alt="" /></li>
              <li><img src="images/01.jpg" alt="" /></li>
              <li><img src="images/02.jpg" alt="" /></li>
              <li><img src="images/03.jpg" alt="" /></li>
              <li><img src="images/04.jpg" alt="" /></li>
              <li><img src="images/05.jpg" alt="" /></li>
            <li><img src="images/01.jpg" alt="" /></li>
           </ul>
       </div>
      <div  class="circles">
            <ul>
                <li class="newColor">1</li>
                <li>2</li>
                <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
        </div>
         <a href="javascript:;" class="prev">&lt;</a>
         <a href="javascript:;" class="next">&gt;</a>
      </div>

JS部分

  <script type="text/javascript">
           /*
              @1 图片移动时间
              @2 图片大小
              @3 节点对象{}
              
           */
        
        function slider(imgMoveTime,imgWidth,objDom)
     {

             function $$(name){
             return document.querySelectorAll(name);
           }
          function $(name){
             return document.querySelector(name);
           }

           function getCss(ele,style){
               return window.getComputedStyle?getComputedStyle(ele)[style]:obj.CurrentStyle(style);
           }

        
         /*
           Dom节点
         */
        
          var circles=$$(objDom[0]); 
          var slider=$(objDom[1]);
          var imgBox=$(objDom[2]);
          var prev=$(objDom[3]);
          var next=$(objDom[4]);
          var sign=true;
          var len=circles.length;
          var circleLen=circles.length;
          

          /*时间运动函数*/
          function  offset(distance)
          {
              var  S=distance;
              var  T=imgMoveTime;
              var  oldT=new Date().getTime();
              var s=0;
              var t=0;
              var newT=0;
              var  timer=null;
              clearInterval(timer);
              var position=imgBox.offsetLeft;
              timer=setInterval(function(){
               newT=new Date().getTime();
               t=newT-oldT;
               
                s=S*t/T;
               if(t/T>=1){
                  
                    imgBox.style.left=position+S+"px";
                    /*
                      实现无线循环
                      当满足条件瞬间变到指定位置
                       欺骗性
                    */
                     if(imgBox.offsetLeft<=-2940){
                        imgBox.style.left="-490px";
                     }
                     else if(imgBox.offsetLeft>=0){
                        imgBox.style.left="-2450px";
                     }
                     /*
                       标记属性  上一张图片切换好了 才能开始开始下一次切换
                     */
                     sign=true;
                    clearInterval(timer);

               }
               else{
                   sign=false;
                   imgBox.style.left=position+s+"px";
               }
              },1000/60);

          }
          
            
                //左按钮切换
             function moveL(){
                    if(sign){
                    offset(imgWidth);
                    }
                    var index=Math.abs(imgBox.offsetLeft/i);
                    console.log(index);
                    if(index<=1){
                     
                       circleMove(circleLen);//这里是小圆点的最大下标
                     }
                    else{
                       circleMove(index-2);
                    }
             }
                //右按钮切换
             function moveR(){
                   if(sign){
                    offset(imgWidth*-1);
                    }
                    var index=Math.abs(imgBox.offsetLeft/imgWidth);
                    console.log(imgBox.offsetLeft);
                    console.log(index);
                    if(index<=circleLen-1){
                    circleMove(index);
                    }
                    else{
                      circleMove(0);
                    }
                    
             }
             
        /*
           左按钮  和  右按钮 点击切换图片
         */
             prev.onclick=moveL;

             next.onclick=moveR;
          
      //点击左右切换按钮 小圆点变化
    function circleMove(index)
    {
       
       for(var i=0;i<len;i++){
           circles[i].className="oldColor";
       }
          circles[index].className="newColor";
    
    }

      //鼠标移动小圆点上颜色变化

function circleColorChange() 
{ for(var i=0;i<len;i++) { 
circles[i].index=i; circles[i].onmouseover=function()
{ for(var j=0;j<len;j++){ circles[j].className="oldColor"; }
 this.className="newColor" imgBox.style.left=(this.index+1)*imgWidth*-1+"px";
 } } } 
circleColorChange();
      //当用户不操作时,也会自动切换图片
       animation=setInterval(function(){
           
            moveR();

       },2000);
       //鼠标移动在上面的时候清除自动播放
      slider.onmouseover=function(){
         clearInterval(animation);

       }
         //鼠标移开的时候自动播放开始
        slider.onmouseout=function(){
         
          animation=setInterval(function(){
           
            moveR();

       },2000);

       }
         }
                //调用
            slider(500,490,    {
               0:".circles ul li",
               1:".slider",
               2:".box ul",
               3:".prev",
               4:".next"
            });

  </script>