<!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>JS+CSS帶數字和左右按鈕可控制切換的圖片幻燈丨芯晴網頁特效丨CsrCode.Cn</title>
<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:white;border-top:1px solid #666;opacity:0.8;filter:alpha(opacity=80);-moz-user-select:none;}
#nav2{float:left;}
#nav2 li{width:16px;height:16px;float:left;line-height:16px;text-align:center;font-size:12px;font-family:Tahoma,sans-serif;font-weight:bold;margin-left:10px;cursor:pointer;}
#nav2 li.hover{background:url(/images/20110708/bg.png) 0 0 no-repeat;color:#fff;}
#left2,#right2{width:16px;height:16px;float:left;margin-left:20px;display:inline;background:url(/images/20110708/bgl.png) 0 0 no-repeat;}
#right2{background:url(/images/20110708/bgr.png) 0 0 no-repeat;}
#left2.showp{background-image:url(/images/20110708/bglh.png);}
#right2.showp{background-image:url(/images/20110708/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://images.cnblogs.com/m01.jpg"></li>
<li><img src="http://images.cnblogs.com/m02.jpg"></li>
<li><img src="http://images.cnblogs.com/m03.jpg"></li>
<li><img src="http://images.cnblogs.com/m04.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>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>丨CsrCode.Cn 收集於網際網路，只為興趣與學習交流，不作商業用途。來源：網頁程式碼站</font></p>
*****************************
用JS能實現頁面位置導航嗎？
2009-03-08 04:45小蛙々 | 分類：JavaScript | 瀏覽1317次
如：當前位置:首頁>>某頁>>某頁>>某頁
並且包含超連結
頁面導航欄位於header.htm模版頁
==================================
檢舉| 2009-03-10 09:39提問者採納
根據位址列導航
如果有index.html,news.html,bbs.html
<script language="JavaScript">
s=location.href.pathname;s=s.substr(0,s.length-5);
if(s=='index') s='首頁';
if(s=='news') s='新聞';
document.write(s);
</script>
提問者評價謝謝，學習了