javascript实现轮播器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>JS实现轮播器</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#box1{
			background-color: red;
			margin:40px auto;
			padding:10px 0;
			width:490px;
			height:760px;
			position: relative;
			overflow: hidden;
		}
		#lunboqi{
			list-style:none;
			position: absolute;
			left:0px;
		}
		#box1 #lunboqi li{
			margin:0 10px;
			float:left;
		}
		#box1 #lunboqi li img{
			width:470px;
			height:760px;
		}
		#aarr{			
			position: absolute;
			bottom: 20px;
		}
		#aarr a{
			float:left;
			width:20px;
			height:20px;
			border-radius: 10px;
			background-color: red;
			opacity:0.4;
			margin:0 5px;
		}
		#aarr a:hover{
			opacity:1;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var lunboqi = document.getElementById("lunboqi");
			var lis = lunboqi.getElementsByTagName("img");
			//调整ul的总大小，使其能够存放所有的li
			lunboqi.style.width = lis.length * 490 + "px";

			var box1 = document.getElementById("box1");
			var aarr = document.getElementById("aarr");
			var as = aarr.getElementsByTagName("a");
			//使超链接组居中显示
			aarr.style.left =  (box1.offsetWidth - as.length*30)/2 + "px";

			//图片的索引
			var index = 0;
			//调整默认索引的颜色
			as[index].style.opacity = 1;

			//自动切换的定时器标识
			var timer;
			autoChange();

			//为每个超链接绑定单机响应函数
			for(var i=0;i<as.length;++i){
				as[i].num = i;
				as[i].onclick = function(){
					//点击时关闭自动切换功能
					clearInterval(timer);
					index = this.num;
					seta();
					animate(lunboqi,"left",-490*index,50,function(){
						//执行完毕后执行
						//开始自动切换
						autoChange();
					});
				};
			}

			//自动切换图片
			function autoChange(){
				timer = setInterval(function(){
					index = (++index) % lis.length;
					animate(lunboqi,"left",-490*index,40,function(){
						seta();
					});
				},2000);
			}

			//设置超链接的样式
			function seta(){
				if(index >= lis.length - 1){
					index = 0;
					lunboqi.style.left = 0 + "px";
				}
				//a全部设置为初始值
				for(var i=0;i<as.length;++i){
					as[i].style.opacity = "";
				}
				//设置当前索引指定的a的样式
				as[index].style.opacity = 1;
			}

			//实现动画过程的函数
			function animate(obj,attr,target,speed,callback){
				clearInterval(obj.timer);
				var current = parseInt(getStyle(obj,attr));
				if(current > target){
					speed = -speed;
				}
				obj.timer = setInterval(function(){
					var oldValue = parseInt(getStyle(obj,attr));
					var newValue = oldValue + speed;
					if((speed < 0 && newValue < target) || (speed > 0) && newValue > target){
						newValue = target;
					}
					obj.style[attr] = newValue + "px";
					if(newValue == target){
						clearInterval(obj.timer);
						//callback存在则执行callback函数
						callback &&　callback();
					}
				},50);
			}

			//获取obj对象的name属性
			function getStyle(obj,name){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[name];
				}else{
					//兼容IE8
					return obj.currentStyle[name];
				}
			}

		};
	</script>
</head>
<body>
	<div id="box1">
		<ul id="lunboqi">
			<li><img src="1.jpg" alt="" /></li>
			<li><img src="2.jpg" alt="" /></li>
			<li><img src="3.jpg" alt="" /></li>
			<li><img src="4.jpg" alt="" /></li>
			<li><img src="5.jpg" alt="" /></li>
			<!-- 非常巧妙的实现了轮播器的自然切换 -->
			<li><img src="1.jpg" alt="" /></li>
		</ul>
		<div id="aarr">
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
	</div>
</body>
</html>
实现效果如图所示：
第一张为自动轮播效果展示，第二张为鼠标单击标识效果展示
javascript实现轮播器

猜你喜欢
