Js无限循环滚动轮播

效果图入下，图片横排，从右至左无限滚动，鼠标放上就暂停，离开继续滚动

思路：

动态创建一列图片，然后根据前一列图片再创建一列图片的复制品，当前一列图片全都滚动超过div最左侧时再让其回到最右边，同时复制品图片正在展示滚动，再当复制品图片也全滚动超过最左侧时，也让其回到最右边，这样就能达到无限滚动的效果了

.popularProducts-cont{
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	margin-top: 40px;
}
.popularProducts-cont-ul{
	position: relative;
	display: flex;
}
.popularProducts-cont-ulul{
	position: relative;
	display: flex;
}
.popularProducts-cont-li{
	justify-content: center;
	align-items: center;
	width: 262px;
	height: 242px;
	padding-left: 5px;
	padding-right: 5px;
}
.popularProducts-cont-img{
	height: 212px;
	width: 262px;
}

<div class="popularProducts-cont">
	<ul class="popularProducts-cont-ul"></ul>
	<ul class="popularProducts-cont-ulul"></ul>
</div>

js代码

	var cont = document.getElementsByClassName('popularProducts-cont')[0];
	var ul = document.getElementsByClassName('popularProducts-cont-ul')[0];
	var ulul = document.getElementsByClassName('popularProducts-cont-ulul')[0];
	//图片地址
	var productsUrl = [
		'./image/home/products1.png',
		'./image/home/products2.png',
		'./image/home/products3.png',
		'./image/home/products4.png',
		'./image/home/products5.jpg',
		'./image/home/products6.png',
		'./image/home/products7.jpg',
		'./image/home/products8.png'
		]
	//创建两个虚空盒子，让li添加进来再一次一起挂在到dom上，优化性能
	var frag = document.createDocumentFragment();
	var fragfrag = document.createDocumentFragment();
	//创建两组相同的图片，当第一组图片全都移动到左边后，再让其返回最右边，来回移动达到无限循环效果
	for(let i=0;i<productsUrl.length;i++){
		let li = document.createElement('li');
		li.className = "popularProducts-cont-li";
		let img = document.createElement('img');
		img.className = "popularProducts-cont-img";
		img.alt = "图片加载失败";
		img.src = productsUrl[i];
		li.appendChild(img);
		frag.appendChild(li);
	}
	for(let i=0;i<productsUrl.length;i++){
		let li = document.createElement('li');
		li.className = "popularProducts-cont-li";
		let img = document.createElement('img');
		img.className = "popularProducts-cont-img";
		img.alt = "图片加载失败";
		img.src = productsUrl[i];
		li.appendChild(img);
		fragfrag.appendChild(li);
	}
	ul.appendChild(frag);
	ulul.appendChild(fragfrag);

	//无限循环移动
	//ulul.offsetLeft获取第二组图片的位置值,这第二是相对于前一组图片的位置
	//所以ulul.style.left值与ulul.offsetLeft不同,前者为0px，后者则是第一组图片的宽度值
	//而第一组图片的offsetLeft值与style.left是同样的
	var ss = ulul.offsetLeft;
	function move(){
		ul.style.left = (ul.offsetLeft-1)+"px";
		ulul.style.left = (ulul.offsetLeft-1)-ss+"px";
		//当哪一组图片全都超出div左边时就让其回到最右边
		if(ul.offsetLeft <= -ss){ul.style.left = ss+"px";}
		if(ulul.offsetLeft <= -ss){ulul.style.left = 0+"px";}
	}
	var time;
	function set(){
	 time = setInterval(e =>{
			move();
		},20)
	}
	set();//开启循环
	//鼠标移入暂停
	cont.onmouseenter=function(){
		clearInterval(time);
	}
	//鼠标移出开启
	cont.onmouseleave=function(){
		set();
	}