JavaScript中怎么實現無縫輪播圖

JavaScript中怎么實現無縫輪播圖，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

html結構

<p class="wrapper">  <p class="inner">    <ul>      <li>頁面1</li>      <li>頁面2</li>      <li>頁面3</li>      <li>頁面4</li>      <li>頁面5</li>      <li>頁面1</li>    </ul>    <p class="circle">      <span class="current">1</span>      <span>2</span>      <span>3</span>      <span>4</span>      <span>5</span>    </p>    <p class="direction">      <span class="left"><</span>      <span class="right">></span>    </p>  </p></p>

js代碼

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業(yè)資訊頻道，感謝您對億速云的支持。