快捷導(dǎo)航

原生js實(shí)現(xiàn)無縫輪播圖

更新時(shí)間：2020年01月11日 14:21:17 作者：honey_seve7n

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

先上效果圖

原理圖

如圖可見，是頁(yè)面按順序依次顯示5張圖片，包裹這五張圖片的外層的盒子，我們叫ul，通過向左或右移動(dòng)不同距離，實(shí)現(xiàn)在視圖中顯示的不同的圖片，實(shí)現(xiàn)輪播，而同時(shí)下面的分頁(yè)小球需要根據(jù)當(dāng)前顯示的內(nèi)容進(jìn)行點(diǎn)亮；

而無縫輪播圖需要在第五張圖片后面再加上第一張圖片，這樣通過右側(cè)箭頭，向右切換，當(dāng)頁(yè)面切換到第六張時(shí)，也就是最后一張圖片，此時(shí)需要將ul的位置設(shè)置為第一張圖的位置，然后從第一張圖片滑動(dòng)到第二張，形成一個(gè)無縫過渡；

同理，樣通過左側(cè)箭頭，向左切換，已經(jīng)顯示到第一張圖片時(shí)，再向左切換，ul會(huì)設(shè)置為到第五張圖的位置，形成一個(gè)無縫過渡

html結(jié)構(gòu)

<div class="wrapper">
 <div class="inner">
  <ul>
   <li>頁(yè)面1</li>
   <li>頁(yè)面2</li>
   <li>頁(yè)面3</li>
   <li>頁(yè)面4</li>
   <li>頁(yè)面5</li>
   <li>頁(yè)面1</li>
  </ul>
  <div class="circle">
   <span class="current">1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
  </div>
  <div class="direction">
   <span class="left"><</span>
   <span class="right">></span>
  </div>
 </div>
</div>

js代碼

//獲取頁(yè)面元素
 var ul = document.getElementsByTagName("ul")[0];
 var inner = document.getElementsByClassName("inner")[0];
 var circle = document.getElementsByClassName("circle")[0];
 var spanArr = circle.children;
 var direction =document.getElementsByClassName("direction")[0];
 var dirChid=direction.children;
 var innerWidth = inner.offsetWidth;
 //兩個(gè)定時(shí)器（一個(gè)記錄圖片，一個(gè)記錄小圓球）
 var dindex = 0;
 var span = 0;
 //var ulNewLi = ul.children[0].cloneNode(true);
 // ul.appendChild(ulNewLi);
 for(var i = 0;i<spanArr.length;i++){
  //給每個(gè)span綁定index，為了和ul中的頁(yè)面聯(lián)動(dòng)
  spanArr[i].index = i;
  spanArr[i].onmouseover = function () {
   //點(diǎn)擊分頁(yè)小球，添加current類，current類定義了小球的背景顏色
   for (var j = 0; j<spanArr.length ;j++) {
    spanArr[j].className = "";
   }
   this.className = "current";
   dindex = span = this.index;
   //調(diào)用緩動(dòng)函數(shù)，傳入?yún)?shù)：移動(dòng)元素，目標(biāo)距離
   animation(ul,-this.index*innerWidth);
  }
 }
 //為左箭頭綁定事件
 //dindex 記錄圖片的索引，span記錄小球的索引，圖片個(gè)數(shù)為6，小球的個(gè)數(shù)為5
 dirChid[0].οnclick=function (event) {
  //每次點(diǎn)擊左切換，圖片的索引減一，小球的索引減一
  dindex--;
  //圖片的索引<0時(shí)，設(shè)置ul的位置為第五個(gè)圖片的位置
  if(dindex<0){
   ul.style.left= -innerWidth*spanArr.length+"px";
   dindex= spanArr.length-1;
  }
  animation(ul,-dindex*innerWidth);
  //小球的索引減一
  span--;
  //當(dāng)小球索引小于0時(shí)，設(shè)置它的索引為4
  if(span<0){
   span= spanArr.length-1;
  }
  //點(diǎn)亮小球
  for(var i= 0 ; i<spanArr.length;i++){
   spanArr[i].className = "";
  }
  spanArr[span].className = "current";
 
 }
 //為右箭頭綁定事件，
 dirChid[1].οnclick=function () {
  dindex++;
  //圖片的索引大于小球長(zhǎng)度個(gè)數(shù)時(shí)，設(shè)置ul的位置為第1張圖片的位置
  if(dindex>spanArr.length){
   ul.style.left=0;
   dindex=1;
  }
  animation(ul,-dindex*innerWidth);
  span++;
  if(span>spanArr.length-1){
   span= 0;
  }
  for(var k= 0 ; k<spanArr.length;k++){
   spanArr[k].className = "";
  }
  spanArr[span].className = "current";
 
 }
 
 //封裝緩動(dòng)動(dòng)畫函數(shù)
 function animation(ele,target) {
  clearInterval(ele.timer);
  ele.timer=setInterval(function () {
   //獲取起使位置
   leader= ele.offsetLeft;
   //獲取緩動(dòng)動(dòng)畫步長(zhǎng)
   var step = (target-leader)/10;
   //支持不同方向的移動(dòng)，所以步長(zhǎng)有正有負(fù)
   step = step >0? Math.ceil(step):Math.floor(step);
   //當(dāng)前位置= 盒子的位置+步長(zhǎng)
   leader = leader +step;
   ele.style.left = leader+"px";
   if(ele.offsetLeft === target) {
    clearInterval(ele.timer);
   }
  },30)
 
}

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: