jQuery：无焦点轮播图，鼠标经过停止，移开继续

首先每个图片的宽度都是100%，高度500px，一共4个图片。
4个图片外层div，id=“imgs”,宽度=100%*4，高度500px。
imgs外层有一个div，id=“show”,宽度是一张图片的宽度100%，height=500px。

<style>
	#show{
		width: 100%;
		height: 500px;
		position: relative;
		border: 1px solid #d9d919;
		overflow: hidden;
	}
	#imgs{
		width: 400%;
		height: 500px;
		position: relative;
		left: 0;
	}
	#imgs>img{
		width: 100%;
		height: 500px;
		float: left;
	}
</style>
<div id="show">
	<div id="imgs">
		<img src="../img/1.jpg" /><img src="../img/2.jpg" /><img src="../img/10.jpg"/><img src="../img/3.jpg" />
    </div>
</div>

注意：imgs的css设置必须有position，否则后面jquery设置动画没有办法设置left的值。
jquery代码：

i=setInterval(scrolls,2000);
function scrolls(){
	$("#imgs").animate({"left":"-100%"},1000,function(){
	    $(this).append($(this).children("img:first"));//将第一张图片移到最后一张
		$(this).css("left","0");
	});
}
$("#show").mouseenter(function(){
    clearInterval(i);
})
$("#show").mouseleave(function(){
	scrolls();
})

本文地址：https://blog.csdn.net/qq_43798927/article/details/107890944