实现移动端无缝轮播图会用到 视觉欺骗 和移动端的ontouchstart ontouchmove ontouchend 三个事件
HTML部分
<div class='swiper'><div class='swiper-box'><div>333333</div><div>000000</div><div>111111</div><div>222222</div><div>333333</div><div>000000</div></div></div>
CSS部分
*{padding: 0;margin: 0;}.swiper {width: 100vw;height: 20vh;overflow: hidden;position: relative;}.swiper-box {position: absolute;width: 600vw;height: 20vh;display: flex;left: -100vw;}div {width: 100vw;height: 20vh;background-color: #f9f;text-align: center;line-height: 20vh;font-size: 50px;}div:nth-child(2n) {background-color: salmon;}
JS部分
var box = document.querySelector('.swiper-box')var num = 1console.log(box);box.ontouchstart = (e) => {this.dx = e.changedTouches[0].pageXthis.box.style.transition = 'none'}box.ontouchmove = (e) => {this.x = e.changedTouches[0].pageX - this.dx;if (this.num == 0) this.num = 4if (this.num == 5) this.num = 1this.box.style.left = this.x / 10 - this.num * 100 + 'vw'}box.ontouchend = (e) => {this.box.style.transition = '.3s all';if (this.x < -150) this.num++if (this.x > 150) this.num--this.x = 0this.box.style.left = this.x / 10 - this.num * 100 + 'vw'}
