第一版移动端无缝滚动20180710

html

  <div class="wrap">
                <ul class="box">
                    <li><div class="box1 box5">4</div></li>
                    <li><div class="box1 box2">1</div></li>
                    <li><div class="box1 box3">2</div></li>
                    <li><div class="box1 box4">3</div></li>
                    <li><div class="box1 box5">4</div></li>
                    <li><div class="box1 box2">1</div></li>
                </ul>
        </div>

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;i++){
    aL[i].style.width = 1/aL.length * 100 + '%';
};
// 手指坐标点初始化
var startPoint = 0;
var startEle = 0;
//手指按下
wrap.addEventListener("touchstart",function(e){
    startPoint = e.changedTouches[0].pageX;
    startEle = box.offsetLeft;
});





//手指滑动
wrap.addEventListener("touchmove",function(e){
    var currPoint = e.changedTouches[0].pageX;
    var disX = currPoint - startPoint;
    var left = startEle + disX;
    box.style.left = left + 'px';
});
//当手指抬起的时候，判断图片滚动离左右的距离
wrap.addEventListener("touchend",function(e){
    var left = box.offsetLeft;

// 判断正在滚动的图片距离左右图片的距离，以及是否为最后一张或者第一张
    var currNum = Math.round(-left/aLiWidth);
    console.log(currNum,box.offsetLeft,aLiWidth)
    if(currNum<0){
        box.style.left =-(aL.length-1)*wrap.offsetWidth + 'px';
        return
    }
    if(currNum>=(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)
})