使用移动端js实现无缝轮播图效果

使用移动端js实现无缝轮播图效果

<div class="cont">
		<div class="swiper">
			<div class="swiperlist"><img src="./images/1.jpg" ></div>
			<div class="swiperlist"><img src="./images/2.jpg" ></div>
			<div class="swiperlist"><img src="./images/3.jpg" ></div>
		</div>
</div>

	*{
		margin: 0;
		padding: 0;
	}
	.cont{
		overflow: hidden;
	}
	.swiper{
		display: flex;
		margin-left: -100%;
	}
	.swiperlist{
		display: block;
	}
	.swiperlist img{
		display: block;
		width: 100%;
	}

	var swiperlist = document.querySelectorAll('.swiperlist')//获取节点
	var swiper = document.querySelector('.swiper')//获取节点
	swiper.insertBefore(swiperlist[swiperlist.length-1].cloneNode(true),swiperlist[0])/* 向第一位插入克隆节点 配合边界到达第一个使用 css一定要给margin-left:-100%; 使用 */
	swiper.appendChild(swiperlist[0].cloneNode(true))/* 克隆节点向后插入克隆节点 配合边界到达最后使用 */
	
/* 动态控制元素宽度 */
	var  list = swiper.children //获取后代数量
	swiper.style.width = list.length * 100 + '%' //动态计算swiper的宽度
	for(var i = 0 ; i < list.length ; i++){//设置每一个后代的宽度
		list[i].style.width = 100/list.length + '%'
	}


var cont = document.querySelector('.cont');//获取总盒子
	var index = 0;//设置默认下标
	var width_ = cont.clientWidth;//获取盒子的宽度
	var left = 0;//设置默认移动距离
	var X = null;//设置点击时的坐标点
	var x = null;//设置点击滑动时的坐标点
	
	// 防抖节流
	var loop = true;
	cont.ontouchstart = function(e){//添加触点按下事件
		if(!loop){ return }//节流器 当loop为false时不让事件执行
		loop = false//改变节流器状态
		setTimeout(function(){//等待指定时间后恢复节流器状态
			loop = true
		},500)
		X = e.changedTouches[0].clientX;//记录点击的坐标点
		swiper.style.transition = null;//关闭过渡效果
		cont.ontouchmove = function(e){//添加触点滑动事件
			x = e.changedTouches[0].clientX;//记录滑动时的坐标点
			swiper.style.transform = 'translateX('+ (left-(X-x)) +'px)';//在原有位置加上触点滑动距离等于当前总滑动距离
		};
		
		cont.ontouchend = function(e){
			swiper.style.transition = 'all .5s';//打开过渡效果
			if(X-x > 50){ //如果X-x(移动距离的于50让swiper动起来)(方向向左边)
				index++;//向下一个滑动 下标++
				if(index >= swiperlist.length){//如果到达左后一张先让swiper展示假的第一张然后瞬间回到真正的第一张
					setTimeout(function(){//等待过渡效果结束（.5s）
						swiper.style.transition = 'none';//关闭过渡效果
						index = 0//重置下标
						left = -width_ * index; //计算总滑动距离
						swiper.style.transform = 'translateX('+ left +'px)';//让swiper瞬间到达指定位置
					},500) 
				}
			}else if(X-x < -50){//如果X-x(移动距离的于-50让swiper动起来)(方向向右边)
				index--;//向上一个滑动 下标--
				if(index<=-1){
					swiper.ontransitionend = function(){//等待过渡效果结束
						swiper.style.transition = 'none';//关闭过渡效果
						index = swiperlist.length-1;//重置下标
						left = -width_ * index; //计算总滑动距离
						swiper.style.transform = 'translateX('+ left +'px)';//让swiper瞬间到达指定位置
						swiper.ontransitionend  = null;//清空过渡结束事件
					}
				}
			}
			left = -width_ * index; //计算总滑动距离
			swiper.style.transform = 'translateX('+ left +'px)';//让swiper到达指定位置
			/* 配合节流器使用 */
			cont.ontouchmove = null //暂时关闭触电滑动事件
			cont.ontouchend = null//暂时关闭触点抬起事件
			
		}
		
	};