自动滑入后停顿的原生JS轮播图DEMO

 JS代码

<script type="text/javascript">
	window.onload=function(){
		with(document){
			var outer=getElementById("outer"),
				imgs=getElementById("imgs"),
				icon=getElementById("icon"),
				liArr=icon.getElementsByTagName("li");
		};
		//为liArr中每个li添加标识index；
		(function(){
			for(var i=0;i<liArr.length;i++){
				liArr[i].index=i;
			};
		})();
		var imgW=510;
		var timer=null;
		var timer2=null;
		var timers=null;
		//设置flag，当flage为false的时候，自动向左滑动函数中的li样式无法变化；在li触发点击事件是，false变为false；事件完成之后变回true；
		var flag=true;
		//点击li触发的事件
		for(var i=0;i<liArr.length;i++){
			liArr[0].style.backgroundColor="skyblue";
			
			liArr[i].onclick=function(event){
				//清除上次点击事件的定时器
				clearInterval(timer);
				//清除自动滑动的定时器
				clearInterval(timer2);
				clearTimeout(timer3);
				
				for(var i=0;i<liArr.length;i++){
					liArr[i].style.backgroundColor="";
					liArr[i].style.borderRadius="50%";
					liArr[i].style.width="20px";
				};
				//li样式变化
				if(flag){
					//flag变回false，防止imgs移动过程中liArr样式发生变化
					flag=false;
					change(event.target);
				};
				//flag变回true
				flag=true;
				
				//获取imgs移动的目的位置line；
				var line=-(event.target.index*imgW);
				var nowLeft=getSty(imgs,"left");
				nowLeft=parseInt(nowLeft);
				//判断imgs需要移动的方向
				if(line>nowLeft){
					wrapRight(imgs,"left",5,line);
				}else{
					wrapLeft(imgs,"left",5,line);
				};
			};
		};
		
		
		
		//调用向左自动滑动的函数
			wrapLeft2(imgs,"left",1);

		
		
		
		
		//创建liArr样式变化的函数change
		function  change(who){
			who.style.backgroundColor="skyblue";
			who.style.borderRadius="15%";
			who.style.width="30px";
		};
		
		
		//创建自动向左滑动的函数wrapLeft2
		function wrapLeft2(obj,attr,speed,line){
			clearInterval(timer2);
		timer2=setInterval(function(){
				var nowPos=getSty(obj,attr);
				nowPos=parseInt(nowPos);
				var newPos=nowPos-speed;
				obj.style[attr]=newPos+"px";
				if(nowPos%imgW==0){
					clearInterval(timer2);
					var I=-(nowPos/imgW);
					if(I<5&&flag){
						//清除掉上个li的样式
						for(var i=0;i<liArr.length;i++){
						liArr[i].style.backgroundColor="";
						liArr[i].style.borderRadius="50%";
						liArr[i].style.width="20px";
						};
						//给当前li添加样式
						change(liArr[I]);
					}else if(I==5){
						for(var i=0;i<liArr.length;i++){
						liArr[i].style.backgroundColor="";
						liArr[i].style.borderRadius="50%";
						liArr[i].style.width="20px";
						};
						change(liArr[0]);
					};
					
					//到达最后一张图片之后，left变为0，从头再次开始运动
					if(nowPos==-5*imgW){
					obj.style[attr]=-1+"px";
					};
				timer3=setTimeout(function(){
						wrapLeft2(obj,attr,speed,line);
					},3000);
				};
				
			},10);
		};
		
		
		//创建点击li向右移动的函数wrapRight
		function wrapRight(obj,attr,speed,line){
			//清除定时器timer防止多次点击
			clearInterval(timer);
			//清除定时器timer2，不再自动向左滑动
			clearInterval(timer2);
			timer=setInterval(function(){
				var nowPos=getSty(obj,attr);
				nowPos=parseInt(nowPos);
				var newPos=nowPos+speed;
				obj.style[attr]=newPos+"px";
				if(newPos>=line){
					obj.style[attr]=line+"px";
					clearInterval(timer);
					//到达目标位置之后再次开始自动向左滑动
					setTimeout(function(){
						wrapLeft2(imgs,"left",1);
					},7000);
				};
			},1)
		};
		//创建点击li向左移动的函数wrapLeft
		function wrapLeft(obj,attr,speed,line){
			//清除定时器timer防止多次点击
			clearInterval(timer);
			//清除定时器timer2，不再自动向左滑动
			clearInterval(timer2);
			timer=setInterval(function(){
				var nowPos=getSty(obj,attr);
				nowPos=parseInt(nowPos);
				var newPos=nowPos-speed;
				obj.style[attr]=newPos+"px";
				if(newPos<=line){
					obj.style[attr]=line+"px";
					//这里一定要用line，而不能用nwePos或者nowPos，
					//因为line是精准的定量，这决定点击li之后图片是否还会停顿；
					clearInterval(timer);
					//到达目标位置之后再次开始自动向左滑动
					setTimeout(function(){
						wrapLeft2(imgs,"left",1);
					},7000);
				};
			},1)
		};
		
		//创建鼠标移入和移出的事件
		outer.onmouseenter=function(){
			clearInterval(timer2);
		};
		outer.onmouseleave=function(){
				wrapLeft2(imgs,"left",1);
		};
		
		
		
		//创建获取imgs的函数 getSty
		function getSty(obj,attr){
			return	window.getComputedStyle?getComputedStyle(obj,null)[attr]:obj.currentStyle[attr];
		};
	};
</script>

CSS+HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#outer{
				width: 520px;
				height: 300px;		
				margin: 0 auto;
				background-color: skyblue;
				position: relative;
				overflow: hidden;
		}
		#imgs{
			list-style: none;
			position: absolute;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			left: 0px;
			margin-left: 10px;
		}
		#imgs>li{
			margin-right: 10px;
		}
		img{
			width: 500px;
			height: 300px;
		}
		#icon{
			list-style: none;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			top: 100%;
			margin-top: -20px;
		}
		#icon>li{
			display: block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: pink;
			margin-left: 30px;
			transition: width 1s;
		}
		#icon>li:first-child{
			border-radius: 40%;
			width: 35px;
		}
		#icon>li:last-child{
			margin-right: 30px;
		}
		
		
	</style>
</head>
<body>
	<div id="outer">
		<ul id="imgs">
			<li><img src="../img/5.jpg"</li>
			<li><img src="../img/1.jpeg"</li>
			<li><img src="../img/2.jpg"</li>
			<li><img src="../img/5.jpg"</li>
			<li><img src="../img/4.png"</li>
			<li><img src="../img/5.jpg"</li>
		</ul>
		<ul id="icon">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

完成后总结：

超时调用的定时器也要清除，不然会无法做到点击滑动到指定位置后的停顿效果；