轮播图js原生（如果你不想用插件 这几个你值得拥有持续更新）

第一版移动端无缝滚动20180710

html

  

                

                    
4
                    
1
                    
2
                    
3
                    
4
                    
1
                
        

less

.wrap {
  position: relative;
  overflow: hidden;
}
.box {
  position: absolute;
  list-style: none;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
}
 .box {
  position: relative;
  height: 1000px;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
}
 .box li {
  height: 100%;
  float: left;
}
 .box li img {
  width: 100%;
  height: 100%;
}
 .box1 {
  height: 100%;
}
 .box2 {
  background: yellow;
}
 .box3 {
  background: yellowgreen;
}
 .box4 {
  background: orange;
}
 .box5 {
  background: cyan;
}

js这里我就不写太多注释了 自己去理解吧

var aL = document.querySelectorAll(".box li");
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var aLiWidth = box.offsetWidth;

box.style.width = aL.length*100 + '%';
for(var i=0;i=(aL.length-1)){
        box.style.left =-1*wrap.offsetWidth + 'px';
        return
    }
    currNum = currNum>=(aL.length-1) ? aL.length-1 : currNum;
    currNum = currNum<=0 ? 0 : currNum; 
    box.style.left = -currNum*wrap.offsetWidth + 'px';
    console.log(box.style.left)
})