原生js轮播[本文已参与「新人创作礼」活动，一起开启掘金创作之路。]原生js轮播原生js轮播原生js轮播原生js轮播原生

[本文已参与「新人创作礼」活动，一起开启掘金创作之路。]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mrli--轮播</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
 
		body{
			background: #ddd;
		}
 
		#carousel{
			width: 950px;
			height: 500px;
			margin: 20px auto;
			position: relative;
		}
 
		/*图片区域;*/
		#carousel #content div{
			display: none;
		}
 
		#carousel #content .current{
			display: block;
		}
 
		/*控制器*/
		#carousel #control{
			list-style: none;
			position: absolute;
			bottom: 15px;
			left: 435px;
		}
 
		#carousel #control li{
			float: left;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			border: 1px solid gray;
			margin-right: 5px;			
		}
 
		#carousel #control li:hover{
			cursor: pointer;
		}
 
		#carousel #control li.sel{
			background: gray;
		}
 
		#carousel .arrow{
			position: absolute;
			top: 234px;
			padding: 2px;
			display: none;
			background: rgba(0,0,0,0.2);
		}
 
		#carousel .arrow:hover{
			cursor: pointer;
		}
 
		#carousel .arrow img{
			width: 28px;
			height: 28px;
		}
 
		#carousel .arrowLeft{
			left: 5px;
		}
 
		#carousel .arrowRight{
			right: 5px;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var car=document.getElementById("carousel");
			//找到所有的图片元素
			var divs=document.getElementById("content").getElementsByTagName("div");
			//找到所有的控制器
			var lis=document.getElementById("control").getElementsByTagName("li");
 
			var oL=document.getElementById("aL");//左箭头
			var oR=document.getElementById("aR");//右箭头
 
			var cur_index=0;//保存当前显示的图片的索引
 
			var t=setInterval(move,2000);
 
			//播放下一张图片
			function move(){
				//当前显示的图片隐藏
				divs[cur_index].className="";
				lis[cur_index].className="";
 
				cur_index++;
				//最后一张
				if(cur_index==divs.length){
					cur_index=0;
				}
				divs[cur_index].className="current";
				lis[cur_index].className="sel";
			}
 
			//给轮播区添加鼠标事件
			car.onmouseover=function(){
				clearInterval(t);
				//显示左右箭头
				oL.style.display="block";
				oR.style.display="block";
			};
 
			car.onmouseout=function(){
				t=setInterval(move,2000);
				//隐藏左右箭头
				oL.style.display="none";
				oR.style.display="none";
			};
 
 
			//给控制器添加点击事件
			for(var i=0;i<lis.length;i++){
				lis[i]._index=i;//保存每个元素对象的位置
				lis[i].onclick=function(){
					lis[cur_index].className="";//当前被选中的指示器变为未选中状态
					divs[cur_index].className="";
 
					//被点击的指示器变为选中状态
					this.className="sel";
					divs[this._index].className="current";//显示对应的图片
					cur_index=this._index;//修改当前显示的图片的索引
				};
			}
 
 
			//右箭头点击事件
			oR.onclick=function(){
				move();
			};
 
			//左箭头点击事件
			oL.onclick=function(){
				moveLeft();
			};
 
			//切换到上一张图片
			function moveLeft(){				
				divs[cur_index].className="";//当前显示的轮播图片隐藏
				lis[cur_index].className="";
 
				cur_index--;
				if(cur_index==-1){
					//当为第一张时，切换为最后一张
					cur_index=divs.length-1;
				}
 
				//显示上一张
				divs[cur_index].className="current";
				lis[cur_index].className="sel";				
			}
		};
	</script>
</head>
<body>
	<div id="carousel">
		<!-- 轮播图片 -->
		<div id="content">
			<div class="current"><img src="img/1.jpg"></div>
			<div><img src="img/2.jpg"></div>
			<div><img src="img/3.jpg"></div>
			<div><img src="img/4.jpg"></div>
			<div><img src="img/5.jpg"></div>
		</div>
 
		<!-- 控制器区 -->
		<ol id="control">
			<li class="sel"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
 
		<div class="arrow arrowLeft" id="aL"><img src="img/arrow-left.png"></div>
		<div class="arrow arrowRight" id="aR"><img src="img/arrow-right.png"></div>
	</div>
</body>
</html>