taobao首页轮播原生js面对对象封装版

答案：<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>taobao首页轮播原生js面对对象封装版</title>
<style>
<!--
body, ul, li, p {
	margin: 0;
	padding: 0;
}
ul{
	list-style-type:none;
}
body {
	font-family:"Times New Roman", Times, serif;
}
#box {
	position:relative;
	width:492px;
	height:172px;
	margin:10px auto;
}
#box .imgList{
	position:relative;
	width:490px;
	height:170px;
	overflow:hidden;
}
#box .imgList li{
	position:absolute;
	top:0;
	left:0;
	width:490px;
	height:170px;
}
#box .countNum{
	position:absolute;
	right:0;
	bottom:5px;
}
#box .countNum li{
	width:20px;
	height:20px;
	float:left;
	color:#fff;
	border-radius:20px;
	background:#f90;
	text-align:center;
	margin-right:5px;
	cursor:pointer;
	opacity:0.7;
	filter:alpha(opacity=70);
}
#box .countNum li.current{
	background:#f60;
	font-weight:bold;
	opacity:1;
	filter:alpha(opacity=70);
}
-->
</style>
<script>
<!--
	function runImg(){}
	runImg.prototype={
		bigbox:null,//最外层容器
		boxul:null,//子容器ul
		imglist:null,//子容器img
		numlist:null,//子容器countNum
		index:0,//当前显示项
		timer:null,//控制图片转变效果
		play:null,//控制自动播放
		imgurl:[],//存放图片
		count:0,//存放的个数
		$:function(obj)
		{
			if(typeof(obj)=="string")
			{
				if(obj.indexOf("#")>=0)
				{
					obj=obj.replace("#","");
					if(document.getElementById(obj))
					{
						return document.getElementById(obj);
					}
					else
					{
						alert("没有容器"+obj);
						return null;
					}	
				}
				else
				{
					return document.createElement(obj);
				}
			}
			else
			{
				return obj;
			}
		},
		//初始化
		info:function(id)
		{
			this.count=this.count<=5?this.count:5;
			this.bigbox=this.$(id);
			for(var i=0;i<2;i++)
			{
				var ul=this.$("ul");
				for(var j=1;j<=this.count;j++)
				{
					var li=this.$("li");
					li.innerHTML=i==0?this.imgurl[j-1]:j;
					ul.appendChild(li);
				}
				this.bigbox.appendChild(ul);
			}
			this.boxul=this.bigbox.getElementsByTagName("ul");
			this.boxul[0].className="imgList";
			this.boxul[1].className="countNum";
			this.imglist=this.boxul[0].getElementsByTagName("li");
			this.numlist=this.boxul[1].getElementsByTagName("li");
			this.numlist[0].className="current";
		},
		//封装程序入口
		action:function(id)
		{
			this.autoplay();
			this.mouseoverout(this.bigbox,this.numlist);
		},
		//图片切换效果
		imgshow:function(num,numlist,imglist)
		{
			this.index=num;
			var alpha=0;
			for(var i=0;i<numlist.length;i++)
			{
				numlist[i].className="";
			}
			numlist[this.index].className="current";
			clearInterval(this.timer);
			for(var j=0;j<imglist.length;j++)
			{
				imglist[j].style.opacity=0;
				imglist[j].style.filter="alpha(opacity=0)";
			}
			var $this=this;
			//利用透明度来实现切换图片
			this.timer=setInterval(function(){
				alpha+=2;
				if(alpha>100){alpha=100};//不能大于100
				//为兼容性赋样式
				imglist[$this.index].style.opacity=alpha/100;
				imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
				if(alpha==100){clearInterval($this.timer)};//当等于100的时候就切换完成了
			},20)//经测试20是我认为最合适的值
		},
		//自动播放
		autoplay:function(){
			var $this=this;
			this.play=setInterval(function(){
				$this.index++;
				if($this.index>$this.imglist.length-1){$this.index=0};
				$this.imgshow($this.index,$this.numlist,$this.imglist);
				},2000)
		},
		//处理鼠标事件
		mouseoverout:function(box,numlist)
		{
			var $this=this;
			box.onmouseover=function()
			{
				clearInterval($this.play);
			}
			box.onmouseout=function()
			{
				$this.autoplay($this.index);
			}
			for(var i=0;i<numlist.length;i++)
			{
				numlist[i].index=i;
				numlist[i].onmouseover=function(){
					$this.imgshow(this.index,$this.numlist,$this.imglist);
				}
			}
		}
	}
	window.onload=function(){
		var runimg=new runImg();
		runimg.count=3;
		runimg.imgurl=[
		"<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>",
		"<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>",
		"<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>"];
		runimg.info("#box");
		runimg.action("#box");
	}
-->
</script>
</head>
<body>
<center><h1>Author:wyf</h1><p>2012/2/24</p></center>
<div id="box"></div>
</body>
</html>
上一个：图片上下飘动,Js飘浮广告代码
下一个：Automatic Infinite Carousel jQuery图片滚动插件
更多图片编程知识: