轮播图 （运动）⭐⭐⭐

思路分析：加个容器content 让滚动条拖动不影响按钮和选项卡滚动条瞬间归0 下一张content.scrollLeft = 0;上一张 Content.scrollLeft = 0 滚动条瞬间回到初始位置
样式css

	<style>
		*{  
			margin: 0;  
			padding: 0;  
			list-style: none;
		}
		.banner{  
			width: 500px;  
			height: 357px;  
			margin: 50px auto 0;  
			border: 1px solid red;  
			overflow: hidden;  
			position: relative;
		}
		.content{  
			width: 500px;  
			height: 357px;  
			overflow-x: auto;  
			/* overflow-x:hidden; */
		}
		.main{  
			width: 6000px;  
			height: 340px;  
			overflow: hidden;
		}
		.main img{  
			width: 500px;  
			height: 340px;  
			float: left;
		}
		.prev{  
			width: 20px;  
			height: 30px;  
			line-height: 30px;  
			text-align: center;  
			background-color: #eee;  
			position: absolute;  
			left: 0;  top: 50%;  
			z-index: 99;  
			margin-top: -15px;  
			cursor: pointer;
		}
		.next{  
			width: 20px;  
			height: 30px;  
			line-height: 30px;  
			text-align: center;  
			background-color: #eee;  
			position: absolute;  
			right: 0;  
			top: 50%;  
			z-index: 99;  
			margin-top: -15px;  
			cursor: pointer;
		}
		.nums{  
			position: absolute;  
			right: 20px;  
			bottom: 20px;
		}
		.nums li{  
			width: 20px;  
			height: 20px;  
			line-height: 20px;  
			text-align: center;  
			background-color: pink;  
			float: left;  
			border-radius: 50%;  
			margin: 0 2px;  
			cursor: pointer;
		}
		.nums li.active{  
			background-color: lightgreen;
		}
	</style>

引入js封装好的

	<div class="banner">  
		<div class="content">    
			<div class="main">      
				<img src="./imgs/c1.jpg" alt="">      
				<img src="./imgs/c2.jpg" alt="">      
				<img src="./imgs/c3.jpg" alt="">      
				<img src="./imgs/c4.jpg" alt="">      
				<img src="./imgs/c5.jpg" alt="">      
				<!-- <img src="./imgs/c1.jpg" alt=""> -->    
			</div>  
		</div>  
		<p class="prev"><</p>  
		<p class="next">></p>  
		<ul class="nums">    
			<li class="active">1</li>    
			<li>2</li>    
			<li>3</li>    
			<li>4</li>    
			<li>5</li>  
		</ul>
	</div>

调用js事件

	<script>
		var content = document.querySelector('.content')
		var main = document.querySelector('.main')
		var prev = document.querySelector('.prev')
		var next = document.querySelector('.next')
		var lis = document.querySelectorAll('.nums li')
		var timervar imgIndex = 0 // 当前显示图片的下标
		var numIndex = 0 // 当前显示数字的下标
		
		// 向main中补一张图片
		var firstImg = main.children[0].cloneNode(true)
		main.appendChild(firstImg)
		
		// 图片长度
		var imgLen = main.children.length
		
		// 图片宽度
		var imgWidth = main.children[0].clientWidth
		
		// 进入页面自动播放autoMove()
		// 自动播放
		function autoMove(){  
			timer = setInterval(function () {    
				moveNext()  
			},3000)
		}
		
		// 播放下一页
		function moveNext(){  
			imgIndex++  
			// 临界值判断  
			if (imgIndex >= imgLen) {    
				imgIndex = 1 // 应该显示的下一张图片下标    
				content.scrollLeft = 0 // 让滚动条瞬间回到前面的第一张图片位置  
			}  
			
			// 移动滚动条  
			animate(content,{'scrollLeft':imgIndex*imgWidth})
  
  			// 去掉上次显示数字的类名  
  			lis[numIndex].className = ''  
			
			// 数字下标递增  
			numIndex++  
			// 临界值判断  
			if (numIndex >= lis.length) {    
				numIndex = 0  
			}  
			// 当前显示的数字添加类名  
			lis[numIndex].className = 'active'
		}
	
		// 播放上一页
		function movePrev(){  
			imgIndex--  
			// 临界值判断  
			if (imgIndex < 0) {    
				imgIndex = imgLen-2 // 应该显示的下一张图片下标    
				content.scrollLeft = imgWidth*(imgLen-1) // 让滚动条瞬间回到后面的第一张图片位置  
			}  
			// 移动滚动条  
			animate(content,{'scrollLeft':imgIndex*imgWidth})
  
  			// 去掉上次显示数字的类名  
  			lis[numIndex].className = ''  
			
			// 数字下标递减  
			numIndex--  
			
			// 临界值判断  
			if (numIndex < 0) {    
				numIndex = lis.length-1  
			}  
			// 当前显示的数字添加类名  
			lis[numIndex].className = 'active'
		}

		// 点击下一页
		next.onclick = function (){  
			clearInterval(timer) // 停止自定播放  
			moveNext()  // 启动自定播放  
			autoMove()
		}

		// 点击上一页
		prev.onclick = function (){  
			clearInterval(timer) // 停止自定播放  
			movePrev()  
			// 启动自定播放  
			autoMove()
		}
	
		// 点击数字切换图片
		for (var i = 0, len = lis.length; i < len; i++){  
			lis[i].index = i  
			lis[i].onclick = function (){    
				clearInterval(timer) // 停止自定播放
  				imgIndex = this.index    
    				
    				// 移动滚动条    
    				animate(content,{'scrollLeft':
    				imgIndex*imgWidth})
    				
    				// 去掉上次显示数字的类名    
    				lis[numIndex].className = ''    
    				numIndex = this.index    
    				// 当前显示的数字添加类名    
    				lis[numIndex].className = 'active'    
    
    				// 启动自定播放    
    				autoMove()  
    			}
    		}
</script>