无缝轮播

最新推荐文章于 2021-05-20 11:30:09 发布

Sleepy Bunny瞌睡兔

最新推荐文章于 2021-05-20 11:30:09 发布

阅读量220

点赞数

文章标签：前端轮播无缝轮播 JavaScript

本文链接：https://blog.csdn.net/weixin_45052104/article/details/91450525

版权

	<script type="text/javascript">
		//获取大盒子
		let scroll = document.getElementById("scroll");
		//获取ul
		let ul = document.getElementById("ul");
		//获取ul中的li
		let ulLis = ul.children;
		//获取每个li的宽度
		let liWidth = ulLis[0].offsetWidth;
		
		//1.克隆元素
		ul.appendChild(ulLis[0].cloneNode(true));
		
		
		function animate(obj,target){
			clearInterval(obj.timer);
			let speed = obj.offsetLeft < target ? 15 : -15;
			obj.timer = setInterval(()=>{
				
				obj.style.left = obj.offsetLeft + speed + 'px';
				if(Math.abs(target - obj.offsetLeft) <= Math.abs(speed)){
					clearInterval(obj.tiemr);
					obj.style.left = target + 'px';
				}
			},30);
		}
		
	var timer = null;
	var key = 0; //控制播放的数量
	var circle = 0;
	var olLis = document.querySelectorAll('#ol li');
	timer = setInterval(autoPlay,3000);
	function autoPlay(){
		key ++;
		if(key > ulLis.length - 1){
			ul.style.left = 0;
			key = 1;
		}
		animate(ul,-key * liWidth);
		
		circle ++;
		if(circle > olLis.length - 1){
			circle = 0;
		}
		for(var i = 0,len = olLis.length;i < len;i ++){
			olLis[i].className = '';
		}
		olLis[circle].className = 'current';
	}
	</script>
</body>