JS实现无限轮播无倒退效果

本文实例为大家分享了JS实现无限轮播无倒退的具体代码,供大家参考,具体内容如下

原理:每次移动前设置transition过渡效果,完成清除过渡效果,然后在到达最后一张图片的时候在清除过渡效果之后translateX(0)

另外需要jq的引用

HTML:

<div class="slide-container" view-count="3">
 <ul>
  <li>
   <img src="http://www.cppcns.com/wangluo/javascript/images/women/15444293310974910.jpg" alt="JS实现无限轮播无倒退效果"/>
  </li>
  <li>
   <img src="http://www.cppcns.com/wangluo/javascript/images/women/15444293312083674.jpg" alt="JS实现无限轮播无倒退效果"/>
  </li>
  <li>
   <img src="http://www.cppcns.com/wangluo/javascript/images/women/15444293313734437.jpg" alt="JS实现无限轮播无倒退效果"/>
  </li>
  <li>
   <img src="http://www.cppcns.com/wangluo/javascript/images/women/15444293315979953.jpg" alt="JS实现无限轮播无倒退效果"/>
  </li>
  <li>
   <img src="http://www.cppcns.com/wangluo/javascript/images/women/15444293316955485.jpg" alt="JS实现无限轮播无倒退效果"/>
  </li>
  <li>
   <img src="http://www.cppcns.com/wangluo/javascript/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数组。

效果图:                                                                       

JS实现无限轮播无倒退效果

JS实现无限轮播无倒退效果

在原来的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();

JS实现无限轮播无倒退效果

扫一扫手机访问