轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="fk.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="fk">
			<!--img[src=img/$.jpg]*6-->
			<img src="img/1.jpg" alt="" style="display: block;"/>
			<img src="img/2.jpg" alt="" />
			<img src="img/3.jpg" alt="" />
			<img src="img/4.jpg" alt="" />
			<img src="img/5.jpg" alt="" />
			<img src="img/6.jpg" alt="" />
			<ul>
				<li style="background: #A52A2A;"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script>
//		如果多途径都要控制同一块效果,那么都通过大总管变量去控制
		var fk=document.getElementById('fk');
		var lis=fk.getElementsByTagName('li');
		var is=fk.getElementsByTagName('img');
		var c=0;//大总管变量
		
//		定时器调用的函数
		function autorun(){
			c++;
			if(c==6){
				c=0;
			}
//			让所有图片隐藏,让所有li变灰
			for(var i=0;i<6;i++){
				is[i].style.display='none';
				lis[i].style.background='#ddd'
			}
//			让c号元素显示
			is[c].style.display='block';
			lis[c].style.background='#A52A2A';
		}
		
		var timer=setInterval(autorun,1000);
		
		
//		给所有li加事件
			for(var i=0;i<lis.length;i++){
//				将序号存到每个li上
				lis[i].xuhao=i;
//				给li加鼠标移入事件
				lis[i].onmouseover=function(){
					clearInterval(timer);
//					获得序号
				var c=this.xuhao;
//				让所有图片隐藏,让所有li变灰
				for(var i=0;i<6;i++){
					is[i].style.display='none';
					lis[i].style.background='#ddd'
				}
	//			让c好元素显示
				is[c].style.display='block';
				lis[c].style.background='#A52A2A';
			
					}
					
	//				给li加鼠标移出事件
				lis[i].onmouseout=function(){
	//				重新设置定时器
					timer=setInterval(autorun,1000);
					}
				}
	</script>
</html>

css代码

*{
	margin: 0;
	padding: 0;
}
#fk{
	 1200px;
	height: 535px;
	position: relative;
	border: 4px solid palevioletred;
	margin: 0 auto;
}
#fk img{
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
#fk ul{
	position: absolute;
	left: 528px;
	bottom: 23px;
}
#fk ul li{
	 12px;
	height: 12px;
	background: #ddd;
	list-style: none;
	float: left;
	margin-right: 8px;
	border-radius: 50%;
}