可控制切換的圖片幻燈切換效果_圖片特效特效

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   id="zlrz7ft"   class="tab">
	<ol ID="con2">
		<li id="pdbrljv"    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   id="nplflz7"   class="navps">
		<a id="left2"></a>
		<ul ID="nav2">
			<li id="bltz5xj"    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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些