原生JS實現勻速圖片輪播動畫，js勻速

原生JS實現勻速圖片輪播動畫，js勻速

JS實現輪播圖實現結果圖：

需求：
1 根據圖片動態添加小圓點
2 目標移動到小圓點輪播圖片
3 滑鼠離開圖片，定時輪播圖片；滑鼠在圖片上時暫停
4  左右兩側可點擊輪播圖片    

一、布局部分

html部分

<div class="w main clearfix"><!--主內容部分開始--><div class="slider"><!--輪播圖部分開始-->  <ul class="imgs" id="slider_imgs">   <li><img src="images/slider01.jpg" id="slider1" alt=""/>   </li>   <li><img src="images/slider02.jpg" id="slider2" alt=""/>   </li>   <li><img src="images/slider03.jpg" id="slider3" alt=""/>   </li>   <li><img src="images/slider04.jpg" id="slider4" alt=""/>   </li>   <li><img src="images/slider05.jpg" id="slider5" alt=""/>   </li>   <li><img src="images/slider01.jpg" id="slider0" alt=""/>   </li>  </ul>   <div class="arrow" id="arrow">    <a href="javascript:;" class="arrow_1"><</a>    <a href="javascript:;" class="arrow_2">></a>   </div> </div><!--輪播圖部分結束--> </div>

css部分

.slider ul.imgs{height:453px;width:4380px;position:absolute;}.slider ul.imgs li{display:block; width:730px;height:453px;float:left;}.slider .circle{position:absolute;left:50%;bottom:8px;}.slider .circle li{cursor:pointer;float:left;width:18px;height:18px;margin:4px;background-color:#3e3e3e;border-radius: 50%;text-align: center;color:#fff;}.slider .circle li.current{background:pink;color:white;}

JS部分

1這是勻速動畫函數的封裝

/****obj:做動畫的DOM對象***target:對象最終運動到的目標位置（X軸）*/function animate(obj,target) {//每次調用要先清定時器    clearInterval(obj.Timer);//根據目標位置判斷移動的方向，每到目標位置步長為20，否則為-20    var speed = target>obj.offsetLeft?20:-20;    obj.Timer =setInterval(function () {      var left = obj.offsetLeft;      obj.style.left = left+speed+"px";      var result = target-left;//目標位置與當前位置在步長20以內，則到達目標位置      if(Math.abs(result)<=20){//停止運動        clearInterval(obj.Timer);//有20像素差距  我們直接跳轉目標位置        obj.style.left=target+ "px";     }    },2函數：`這裡寫代碼片0);  }

輪播圖封裝函數：

function slider(){      //焦點圖資訊DOM節點      var imgs=document.getElementById("slider_imgs");      var slides =imgs.parentNode;      var lis =imgs.getElementsByTagName("li");      var arrows = document.getElementById("arrow");      var arrowLink=arrows.children;      //建立小圓點      var circle=document.createElement("ol");      circle.setAttribute("class","circle");      imgs.parentNode.appendChild(circle);      for(var i=0,len=lis.length-1;i<len;i++){        var li =document.createElement("li");        li.innerHTML = i+1;        circle.appendChild(li);      }      //marginLeft=-imgli(length)*olLi(width)/2      circle.style.marginLeft = (-13*len)+"px";      var olLis =circle.children;      olLis[0].className="current";      //為小圓點添加滑鼠事件      for(var i=0;i<olLis.length;i++){    //當前小圓點索引        olLis[i].index = i;        olLis[i].onmouseover=function () {          for(var j=0;j<olLis.length;j++) {            olLis[j].className = "";          }          this.className="current";          //圖片切換 imgs的CSS部分加上定位          animate(imgs,this.index*(-lis[0].offsetWidth));     //當滑鼠挪到定時器，當前播放圖片與原點位置回原          k=z=p=q=this.index;        };      }//滑鼠移動到輪播圖，不定時播放      slides.onmouseover=function () { //清除自動輪播定時器        clearInterval(Time);      };//滑鼠移開，自動輪播              slides.onmouseout=function () {        Time =setInterval(autoPlay,1000);      };//定時器部分            var Time=null,k=0,z=0;      Time=setInterval(autoPlay,1000);      //自動輪播圖片，定時器Time      function autoPlay() {        k++;        if(k>lis.length-1){          imgs.style.left=0;          k=1;        }        animate(imgs,k*(-lis[0].offsetWidth));        z++;        if(z>olLis.length-1){          z=0;        }        for(var j=0;j<olLis.length;j++) {          olLis[j].className = "";        }        olLis[z].className="current";      }      var q=0;var p=0;      arrowLink[1].onclick=function () {        q++;        if(q>lis.length-1){          imgs.style.left=0;          q=1;        }        p++;        if(p>olLis.length-1){          p=0;        }        for(var j=0;j<olLis.length;j++) {          olLis[j].className = "";        }        olLis[p].className="current";        animate(imgs,q*(-lis[0].offsetWidth));      }    }

 以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。