<!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{400px;height:300px;margin:0 auto;border:1px solid #999;position:relative;}
#con2{400px;height:300px;overflow:hidden;}
#con2 li{display:none;}
#con2 li img{400px;height:300px;}
#con2 li.show{display:block;}
.navps{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{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{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>
提问者评价谢谢，学习了