无缝轮播（二）

上一篇：无缝轮播（一）

哎，其实早就做出来了，但是这几天一直在玩绝地求生手游版，结果就一直没拿出时间来写这篇进阶版（姑且算是进阶吧）。
先放效果吧：

这里最主要就是加了下面小圆点和定时器功能

<ul class="carousel_index">
    <!-- 其实这里的都应该用js动态生成  因为不确定轮播的个数  可以根据下方信息的itemNum来生成 li -->
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

css

.carousel_index{
    position: absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:5%;
    padding:0;
    font-size: 0;
}
.carousel_index li{
    list-style: none;
    width:20px;
    height:20px;
    border-radius: 10px;
    border:1px solid grey;
    line-height:20px;
    text-align:center;
    display: inline-block;
    font-size: 14px;
    margin:0 5px;
    cursor: pointer;
}
.carousel_index li:hover,
.carousel_index li.active{
    background:grey;
    opacity: 0.5;
}

正餐：因为添加了小圆点也就添加了index值的存在

//基础信息
const prev = document.querySelector('#prev');
const next = document.querySelector('#next');
var carouselItem = document.querySelector('.carousel_item');
// 存储信息
const carousel_info = {
    itemNum:4,//个数
    itemLength:600,//图片大小
    totalLength:2400//总长数
}
var index = 1,oldIndex = 1,maxOffset = carousel_info.itemNum-1;

// 动画切换效果
 function animate(offset) {
      //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
      //且style.left获取的是字符串，需要用parseInt()取整转化为数字。

      var newLeft = parseInt(carouselItem.style.left) + offset*carousel_info.itemLength;

      //这里主要判断到了两头要重新设置left值  不然轮播两头有个copy1 和copy2是为啥呢  对吧
      if(newLeft < -carousel_info.totalLength) {
          carouselItem.style.left = newLeft + 'px';//改变left值
          index = 1 ;
          console.log(index);
          togItem(index);
          setTimeout(function(){
              carouselItem.style.transition = 'none';
              carouselItem.style.left = -carousel_info.itemLength + 'px';
          },200)

      } else if(newLeft > -carousel_info.itemLength) {
          carouselItem.style.left = newLeft + 'px';
          index = carousel_info.itemNum;//变为最大index 
          console.log(index);
          togItem(index);
          setTimeout(function(){
              carouselItem.style.transition = 'none';
              carouselItem.style.left = -carousel_info.totalLength + 'px';
          },200)

      } else {
          console.log(index);
          togItem(index);
          carouselItem.style.transition = 'left .2s ease-in';
          carouselItem.style.left = newLeft + 'px';
      }
  }
  // 下面小圆点跟着改变
  function togItem(index){
      $('.carousel_index>li').removeClass('active');
      $('.carousel_index>li:nth-child('+index+')').addClass('active');
  }

  // 定时器功能
  var timer;
  function play(){
      timer = setInterval(function(){
          next.onclick();
      },1500)
  }
  function stop(){
      clearInterval(timer);
  }

  window.onload = function() {                      
      prev.onclick = function() {   
          index = index-1 ;//index值改变       
          animate(1);                
      }
      next.onclick = function() {  
          index = index+1;
          animate(-1);

      }
      play();
      $('.carousel_warp').mouseover(function(){
          stop();
      });
      $('.carousel_warp').mouseout(function(){
          play();
      });

      // 小面小圆点点击事件
      $('.carousel_index>li').on('click',function(){               
          var newIndex = $(this).index() + 1;  
          oldIndex = index;      //获取已在的下标       
          offset = oldIndex - newIndex;//获取已在的下标和新的下标的距离
          index = newIndex;//改变index值
          console.log(offset,newIndex);
          // if(offset == maxOffset){
          //     animate(-1);
          // }else if(offset == -maxOffset){
          //     animate(1);
          // }else{
          //     animate(offset);
          // }
          animate(offset);

      })
  }

其实我都忘了怎么去讲解，所以才直接贴出代码的，不过代码中都有注释，大家先看完第一篇，再看这篇我觉得应该ok,主要就是控制小圆点的显示和定时器效果。

嗨呀，感觉都是废话

完整代码