html5 带箭头的焦点轮播图,纯原生js

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实验2</title>
<style>
	*{
		margin:0;
		padding:0;
		list-style: none;/*去掉列表的样式*/
	}
	#wrap{
		width:980px;
		height:300px;
		margin:150px auto;/*atuo会使其居中*/
		position:relative;
		cursor: pointer;
	}
	#pic li{
		display: none;
		position:absolute;/*绝对定位,相对于上面用相对定位的父元素*/
		top:0;
		left:0;
		z-index: 1;
	}
	#num{
		position:absolute;/*绝对定位,相对于上面用相对定位的父元素#wrap*/
		z-index: 2;/*比上面#pic li的对应属性的值大,因此这个元素会显示在更上层,覆盖在上一个元素上面*/
		bottom:20px;
		left:100px;
	}
	#num li{
		float:left;/*向左浮动,使列表水平排列*/
		width:16px;
		height:16px;
		margin:5px;
		border-radius: 50%;/*border-radius圆角边框,四个角都为半径为原来边长的50%的圆弧,使呈现为小圆点形状*/
		border:1px solid #FFFFFF;
		line-height: 20px;
		background: #fefefe;
		text-align:center;
	}
	#num li.active{
		background: #ECBC0E;
		/*当前显示的这一项它的颜色会不同于其他项*/
	}
	.arrow{
		z-index: 3;/*箭头覆盖在上面两个列表之上显示*/
		height:100px;
		width:60px;
		position: absolute;/*相对于使用相对定位的id=wrap*/
		top:40%;
		line-height: 100px;/*可以使其内容在高度为100px的元素中高度居中*/
		text-align: center;
		background:#F4E7E7;
		display:none;/*初始时不显示*/
	}
	#wrap:hover .arrow{
		display:block;
		/*当鼠标悬停在轮播图区域上方时,箭头以block格式显示出来*/	
		
	}
	.arrow:hover{
		background: #555555;
		/*当鼠标悬停在此元素上方时,背景颜色改变*/
	}
	#left{
		position: absolute;
		left:0;
	}
	#right{
		position: absolute;
		right:0;
	}
</style>
</head>

<body>
	<!--id=wrap的div为整个轮播图的容器。
里面嵌套的id=pic的ul列表为图片的列表,初始时都将display属性设置为none,不显示出来。
第二个id=num的ul列表是轮播图下方的代表当前是第几张图的焦点.
第三部分的两个a标签,为轮播图的左右箭头。-->
	<div id="wrap">
		<ul id="pic">
			<li style="display:block;">
				<img src="1.jpg" alt="" />
			</li>
			<li style="display:none;">
				<img src="2.jpg" alt="" />
			</li>
			<li style="display:none;">
				<img src="3.jpg" alt="" />
			</li>
			<li style="display:none;">
				<img src="4.jpg" alt="" />
			</li>
			<li style="display:none;">
				<img src="5.jpg" alt="" />
			</li>
			<li style="display:none;">
				<img src="6.jpg" alt="" />
			</li>
			
		</ul>
		<ul id="num">
			<li class="active">1</li>
			<li class="">2</li>
			<li class="">3</li>
			<li class="">4</li>
			<li class="">5</li>
			<li class="">6</li>
			
		</ul>
		<a href="javascript:;" class="arrow" id="left">&lt;</a>
		<a href="javascript:;" class="arrow" id="right">&gt;</a>
	</div>
<script>
	function $(id){
		return document.getElementById(id);
		/*此函数用来依据id获取元素,id为函数参数*/
	}
	
	var Lt=$("left");
	var Rt=$("right");
	var index=0;/*代表当前播放的图片是第几张*/
	var timer=null;
	var pic=$("pic").getElementsByTagName("li");/*获取id=pic的元素内标签名为li的元素,有多个,返回值是一个列表*/
	var num=$("num").getElementsByTagName("li");
	var Div=$("wrap");
	timer=setInterval(run,2000);/*定时播放图像*/
	
	/*当鼠标点击右箭头时,执行函数,
	当index的值超出范围是,归0,
	没有超出范围时,播放下一张图像*/
	Rt.onclick=function(){
		index++;
		if(index>=pic.length)
			{
				index=0;
			}
		change(index);
		
	}
	/*当鼠标点击左箭头时,执行函数,
	当index的值超出范围是,将其值设置为最大值,
	即代表最后一张图像,
	没有超出范围时,播放上一张图像*/
	Lt.onclick=function(){
		index--;
		if(index<0)
			{
				index=pic.length-1;;
			}
		change(index);
		
	}
	/*当鼠标悬停在此元素上方时,执行函数,停止定时播放*/
	Div.onmouseover=function(){
		clearInterval(timer);
		/*clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作
		clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量:*/
	}
	/*当鼠标离开此元素上方时,执行函数,继续定时播放*/
	Div.onmouseout=function(){
		timer=setInterval(run,2000)
		/*setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。*/
	}
	
	/*播放下一张图像*/
	function run(){
		index++;
		if(index>=pic.length){
			index=0;
		}
		change(index);
	}
	for(var i=0;i<num.length;i++){
		num[i].index=i;
		/*给每一项一个序号,当鼠标悬停在此项元素上方时,播放与它序号相同的那张图像*/
		num[i].onmouseover=function(){
			change(this.index);
		}
	}
	/*播放序号为curindex的图像*/
	function change(curindex){
		for(var i=0;i<pic.length;i++){
			pic[i].style.display="none";
			num[i].className="";
		}
		/*使序号为curindex的图像显示出来,其它图像不显示,
		为相同序号的小圆点的className属性赋值,其它序号不同的项清除这一属性,
		使这一序号的小圆点的背景与其它不同*/
		pic[curindex].style.display="block";
		num[curindex].className="active";
		index=curindex;/*使index的值为当前正在播放的图像的序号*/
	}
	
</script>
</body>
</html>

你可能感兴趣的:(html,js,css)