1110搜索
网站导航: 资讯 视频 酷站 下载 上网导航 流量交换
标签: 项目对接58寻人网三名轮值84.59万元一定要表演一名楼盘飞猪品质哪些微信微博广告营销连续评书唏嘘

淘宝网首页JS图片轮播,面向对象封装代码

时间:2022-11-07 01:07:15 阅读:49 评论:0

先看效果

1.png

复制代码

<!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=5;
		runimg.imgurl=[
		"<img src=\"//ku.shouce.ren/files/images/201601/56a34a983a5f2.jpg\"/>",
		"<img src=\"//ku.shouce.ren/files/images/201601/56a34a9b0aa0b.jpg\"/>",
		"<img src=\"//ku.shouce.ren/files/images/201601/56a34a9e8992e.jpg\"/>",
		"<img src=\"//ku.shouce.ren/files/images/201601/56a34aa0cfac2.jpg\"/>",
		"<img src=\"//ku.shouce.ren/files/images/201601/56a34aa497189.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>


免责声明
本网站发布的内容(图片,视频和文字)以原创,转载和分享网络内容为主,如有涉及侵权尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服QQ:1975212473,邮箱:1975212473@qq.com。
本文标签: 广告代码  

本文暂无评论 - 欢迎您