本文例項為大家分享了JS實現無限輪播無倒退的具體程式碼，供大家參考，具體內容如下

原理：每次移動前設定transition過渡效果，完成清除過渡效果，然後在到達最後一張圖片的時候在清除過渡效果之後translateX（0）

另外需要jq的引用

HTML：

<div class="slide-container" view-count="3">
 <ul>
  <li>
   <img src="images/women/15444293310974910.jpg" alt="JS實現無限輪播無倒退效果"/>
  </li>
  <li>
   <img src="images/women/15444293312083674.jpg" alt="JS實現無限輪播無倒退效果"/>
  </li>
  <li>
   <img src="images/women/15444293313734437.jpg" alt="JS實現無限輪播無倒退效果"/>
  </li>
  <li>
   <img src="images/women/15444293315979953.jpg" alt="JS實現無限輪播無倒退效果"/>
  </li>
  <li>
   <img src="images/women/15444293316955485.jpg" alt="JS實現無限輪播無倒退效果"/>
  </li>
  <li>
   <img src="images/women/15444293317767707.jpg" alt="JS實現無限輪播無倒退效果"/>
  </li>
 </ul>
</div>

CSS：

.slide-container {
   max-width: 1230px;
   margin: auto;
   overflow: hidden;
  }
  .slide-container li {
   float: left;
  }
  .slide-container img {
   width: 100%;
  }

JS:

第一步我們應該在ul的所有li前面和後面複製一份一摸一樣的li陣列。

效果圖：

在原來的li集合前後添加了一個一模一樣的集合之後，slide-container顯示的是prepend（li集合）。

為了使slide-container顯示的是最中間的li集合，設定ul:margin-left 和margin-right為負值。大小為一個li集合的寬度。

這樣ul實際的寬度就是原來的三倍。slide-container顯示的就是最原始的li集合。

let orgLen,canMove,curLi,curLen,slider = null,interval = null,curImgIndex = 0;
 
  function initSlider() {
   let orgLiArray = document.querySelectorAll('.slide-container li');
 
   orgLen = orgLiArray.length;
   canMove = true;
   slider = $('.slide-container');
 
   addLi();
   setStyle();
 
   //新增li
   function addLi() {
    for (let i = 0; i < orgLen; i++) {
     let preLi = orgLiArray[orgLen - i - 1].cloneNode(true);
     let apLi = orgLiArray[i].cloneNode(true);
     document.querySelector('.slide-container ul').prepend(preLi);
     document.querySelector('.slide-container ul').append(apLi);
    }
   }
 
   function setStyle() {
    curLi = slider.find('li');
    curLen = curLi.length;
 
    curLi.css({
     'width': 'calc(' + 100 / curLen + '% - 10px)',//動態設定li的寬度
     'margin': '0 5px'
    });
 
    //根據實際li個數與ul中使用者能夠看到的個數比例設定ul寬度
    slider.find('ul').css({
     'width': curLen / slider.attr('view-count') * 100 + '%',});
 
    //獲取到設定了width之後的li寬度
    //通過margin-left 與margin-right 為負數 使中間的原始li集合在slide-container顯示
    let width = document.defaultView.getComputedStyle(curLi[0]).width.match(/\d*\W\d/g);
 
    width = (parseFloat(width) + 10) * orgLen;
    slider.find('ul').css({
     'margin-left': '-' + width + 'px','margin-right': '-' + width + 'px',});
   }
  }  
 
  /**
   * 移動函式
   * 每次移動後移除過渡效果
   * 當前第一個圖片索引值的絕對值大於原始圖片數量則恢復為原始狀態
   * @param imgIndex
   */
  function move(imgIndex) {
   canMove = false;  //滾輪滾動中不能再次滾動
   clearInterval(interval); //清除定時器
   slider.find('ul').css({
    'transition': 'all 0.5s linear'
   });
 
   setTimeout(function () { //移動
    slider.find('ul').css({
     'transform': 'translateX( ' + 100 / curLen * -imgIndex + '% )',});
    setTimeout(function () { //移動完成後清除過渡效果
     slider.find('ul').css({
      'transition': '',});
     setTimeout(function () {
      if (Math.abs(imgIndex) >= orgLen) { //到達邊界回到初始狀態
       curImgIndex = 0;
       slider.find('ul').css({
        'transform': 'translateX(0)'
       });
      }
      canMove = true;
      startInterval();
     },20);
    },500);
   },20);
  }
  
  function startInterval() {
   interval = setInterval(function () { //開始輪播
    curImgIndex++;
    move(curImgIndex);
   },2000);
  }
 
  initSlider();
  startInterval();

然後加入滑鼠滾輪實現效果，可以用滾輪切換圖片。

先編寫具體的處理函式。

//統一處理滾輪滾動事件
  function wheel(event) {
   var delta = 0;
   if (!event) event = window.event;
   if (event.wheelDelta) {  //IE、chrome瀏覽器使用的是wheelDelta，並且值為“正負120”
    delta = event.wheelDelta / 120;
    if (window.opera)
 
    //因為IE、chrome等向下滾動是負值，FF是正值，為了處理一致性，在此取反處理
     delta = -delta;
   } else if (event.detail) {  //FF瀏覽器使用的是detail,其值為“正負3”
    delta = -event.detail / 3;
   }
   if (delta) {
    handle(delta);
 
    //阻止事件冒泡和螢幕向下滾動
    event.preventDefault() && event.stopPropagation();
   }
 
  }
 
  //上下滾動時的具體處理函式
  function handle(delta) {
   //向上滾動
   if (delta < 0 && canMove) {
    curImgIndex++;
    move(curImgIndex);
   } else if (delta > 0 && canMove) { //向下滾動
    curImgIndex--;
    move(curImgIndex);
   }
  }

然後繫結滾輪滾動事件

//相容性寫法
if (window.addEventListener) //FF,火狐瀏覽器會識別該方法
  slider.get(0).addEventListener('DOMMouseScroll',wheel,false);
  slider.get(0).onmousewheel = wheel; //W3C

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