html手指滑动滚动图片,js原生实现移动端手指滑动轮播图效果的示例

Document

html{height:100%;}

body{width: 100%;height:100%;margin:0;overflow: hidden;}

.wrap{position: relative;overflow: hidden;}

.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}

.box li{float:left;}

.box{

position: relative;

height: 2000px;

width: 100%;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: red;

}

.box1{

height: 2000px;

}

.box2{

background: yellow;

}

.box3{

background: yellowgreen;

}

.box4{

background: orange;

}

.box5{

background: cyan;

}

• 11111
• 2222
• 3333
• 4444

var aLi = document.querySelectorAll(".box li");

var box = document.querySelector('.box');

var wrap = document.querySelector('.wrap');

var aLiWidth = box.offsetWidth;

console.log('aLiWidth: ' + aLiWidth)

wrap.style.height = aLi[0].offsetHeight + 'px';

// 设置盒子的宽度

box.style.width = aLi.length*100 + '%';

for(var i=0;i

aLi[i].style.width = 1/aLi.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);

currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;

currNum = currNum<=0 ? 0 : currNum;

box.style.left = -currNum*wrap.offsetWidth + 'px';

})