可控制切换的图片幻灯切换效果_图片特效特效

JavaScript版可控制的图片切换，设计精美，四张图片轮播，用了5张背景图，简洁大方。使用说明：
　　addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并在两侧,"内容栏选中时的className","向左按钮的ID","向右按钮的ID");
　　左右按钮在tab容器外的代码和效果：
　　addTab("nav2","li",false,"hover","con2","li",false,"show","left2","right2");

<!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>
<title>可控制切换的图片幻灯切换效果</title>
<meta http-equiv="mrc-type" mrc="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
ul,ol{list-style-type:none;}
.tab{width:400px;height:300px;margin:0 auto;border:1px solid #999;position:relative;}
#con2{width:400px;height:300px;overflow:hidden;}
#con2 li{display:none;}
#con2 li img{width:400px;height:300px;}
#con2 li.show{display:block;}
.navps{width:100%;height:25px;padding-top:7px;position:absolute;left:0;bottom:0;z-index:1;background:url(http://p1.mb5u.com/texiao/1/20110225160608704.png) 0 0 no-repeat;color:#fff;}
#left2,#right2{width:16px;height:16px;float:left;margin-left:20px;display:inline;background:url(http://p1.mb5u.com/texiao/1/20110225160608705.png) 0 0 no-repeat;}
#right2{background:url(http://p1.mb5u.com/texiao/1/20110225160608706.png) 0 0 no-repeat;}
#left2.showp{background-image:url(/jscss/demoimg/201011/bglh.png);}
#right2.showp{background-image:url(/jscss/demoimg/201011/bgrh.png);}
</style>
<script language="javascript">
//代码示例：
//addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并在两侧,"内容栏选中时的className","向左按钮的ID","向右按钮的ID");
//左右按钮在tab容器外的代码和效果：
//addTab("nav2","li",false,"hover","con2","li",false,"show","left2","right2");
	function $(id){return typeof id=="string"?document.getElementById(id):id;}
	function $$(id,tagname){return typeof id=="string"?document.getElementById(id).getElementsByTagName(tagname):id.getElementsByTagName(tagname);}
	//构造函数---初始化变量
	function AddTab(idNav,idCon,idLeft,idRight,idNavSun,idConSun){
		this.idNav=$(idNav);
		this.idCon=$(idCon);
		this.idLeft=$(idLeft);
		this.idRight=$(idRight);
		this.navLiList=$$(idNav,idNavSun);
		this.conLiList=$$(idCon,idConSun);
		this.navLength=$$(idNav,idNavSun).length;
		this.conLength=$$(idNav,idConSun).length;
	}
	//构造函数---初始化方法
	AddTab.prototype={
		constructor : AddTab,
		addHd : function(oT,sT,fN){
			if (oT.addEventListener){
				oT.addEventListener(sT,fN,false);
			}
			else {
				oT["on"+sT]=fN;
			}
		},//事件监听器
		classTab : function(e,nowFocus,leftOrR){
			if (typeof nowFocus=="number")
			{
				if (leftOrR=="left")
				{
					for (i=0;i<this.navLength ;i++ )
						{
							if (nowFocus==0){nowFocus=4;}
							this.navLiList[i].className=i==nowFocus-1?"hover":"";
							this.conLiList[i].className=i==nowFocus-1?"show":"";
						}
				}
				else if (leftOrR=="right"){
					for (i=0;i<this.navLength ;i++ )
						{
							if (nowFocus==this.navLength-1){nowFocus=-1;}
							this.navLiList[i].className=i==nowFocus+1?"hover":"";
							this.conLiList[i].className=i==nowFocus+1?"show":"";
						}
				}
			}
			else {
				for (i=0;i<this.navLength ;i++ )
				{
					this.navLiList[i].className=this.navLiList[i]==e?"hover":"";
					this.conLiList[i].className=this.navLiList[i]==e?"show":"";
				}
			}
		},//切换class
		addHdEach : function(){
			var oTa=this;
			for (i=0;i<this.navLength ;i++ )
			{
				oTa.addHd(oTa.navLiList[i],"mouseover",function(){oTa.classTab(this);})
			}
			oTa.addHd(oTa.idLeft,"click",function(){
				var nowFocus=oTa.nowFocus();
				oTa.classTab("",nowFocus,"left")
			});
			oTa.addHd(oTa.idRight,"click",function(){
				var nowFocus=oTa.nowFocus();
				oTa.classTab("",nowFocus,"right")
			});
			oTa.addHd(oTa.idLeft,"mousedown",function(){
				this.className="showp";
			});
			oTa.addHd(oTa.idLeft,"mouseup",function(){
				this.className="";
			});
			oTa.addHd(oTa.idRight,"mousedown",function(){
				this.className="showp";
			});
			oTa.addHd(oTa.idRight,"mouseup",function(){
				this.className="";
			});
			oTa.idNav.onselectstart=function(){return false;};
			oTa.idLeft.onselectstart=function(){return false;};
			oTa.idRight.onselectstart=function(){return false;};
		},//为每个对象增加事件监听
		nowFocus : function(){
			for (i=0;i<this.navLength ;i++ )
			{
				if (this.navLiList[i].className=="hover") return i;
			}
		}//返回当前聚焦元素的下标
	}
	window.onload=function(){
	var person1 = new AddTab("nav2","con2","left2","right2","li","li");
	person1.addHdEach();//为新标签触发绑定事件。
	}
</script>
</head>
<body>
<div class="tab">
	<ol ID="con2">
		<li class="show"><img src="http://p1.mb5u.com/texiao/1/20110225160608707.jpg"></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160608708.jpg"></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160608709.jpg"></li>
		<li><img src="http://p1.mb5u.com/texiao/1/20110225160608710.jpg"></li>
	</ol>
	<div class="navps">
		<a id="left2"></a>
		<ul ID="nav2">
			<li class="hover">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<a id="right2"></a>
	</div>
</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-06

[收藏][报错][返回列表]

可控制切换的图片幻灯切换效果_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些