JS原生实现轮播图的几种方法

 
  /*容器*/
  
  /*存放图片的列表*/
   
l5
   
1
   
2
   
3
   
4
   
5
   
r1
  
 
 
   /*设置按钮*/   
  
			/*点击小圆圈切换到固定图片*/
   
1
   
2
   
3
   
4
   
5
  
  
     /*向左切换和向右切换的按钮*/
   ←
   →
  
 

var wrap = document.getElementById('wrap');
var nowleft = -400;     //用于存放当前列表的left的值
var currIndex = 1;			//用于存放当前是第几个图片
//定位到几个按钮
var btnNum = document.getElementsByClassName('btnNum'); //小圆圈

var right = document.getElementsByClassName('right')[0]; //向右滑的按钮
var left = document.getElementsByClassName('left')[0];		//向左滑的按钮

function next() {
  setInterval(function() {      //设置每两秒切换一次图片
    wrap.style.transition = 'left 1s' //设定有过渡滑动的效果
		nowleft = parseInt(wrap.style.left) - 400;  //切换一次后nowleft应该减少（即向左滑）一个图片的宽度
    wrap.style.left = nowleft + 'px';   //然后将nowleft赋值给wrap的left属性
    if(parseInt(wrap.style.left) == -2400) { //判断到最后一个后，偷偷变回到最开头的位置
      setTimeout(() => {
       wrap.style.transition = 'none'  //因为是偷偷变回去，所以要取消过渡效果
       nowleft = -400;
       wrap.style.left = nowleft + 'px'
      },1200) //保证定时器的时间大于过度的时间且小于每次轮换的时间
     }
  },2000)
}

right.addEventListener('click',function() {
  if(nowleft >= -2000){   //判断是否到最后一个图了，没有的话就开始滑动
   nowleft -= 400;
   wrap.style.transition = 'left 1s';
   wrap.style.left = nowleft + 'px';
  }
  if(nowleft == -2400) {   //如果到最后一个图了，就偷偷换回第一张图
   setTimeout(() => {
    wrap.style.transition = 'none';
    nowleft = -400;
    wrap.style.left = nowleft + 'px';
   },1020)
  }
})

for(let i = 0; i