https://interjc.googlecode.com/svn/trunk/jquery/nav

<div id="box" class="t1">
    <div id="nav">
        <p class="nav_title">
            <!--以下的a标签是你可以修改的地方（你可以按照对应的格式修改href值及内容、增减a标签数量等）-->
            <a class="t1 nav_title_checked" href="#">Test One</a> 
            <a class="t2" href="#">Test Two</a> 
            <a class="t3" href="#">Test Three</a> 
            <a class="t4" href="#">Test Four</a> 
            <a class="t5" href="#">Test Five</a> 
            <!--可修改区域结束-->
        </p>
        <p class="nav_button"> 
            <a class="nav_button_checked" title="t1" href="#">1</a> 
            <a title="t2" href="#">2</a> 
            <a title="t3" href="#">3</a> 
            <a title="t4" href="#">4</a>
            <a title="t5" href="#">5</a>
        <br class="clear" />
        </p>
    </div>
</div>

<style type="text/css">
#box {
	width:500px;   /*此处设置幻灯片的整体宽度*/
	height:400px;  /*此处设置幻灯片的整体高度*/
	background-color:#EEFAFF;
	background-repeat:no-repeat;
	position:relative;
}
/*编辑以下的类更换背景图片
你可以按照规律增减图片数量，将http://d.interjc.net/slider/t1.jpg等图片地址更换为你的背景地址*/
.t1{background:url(http://d.interjc.net/slider/t1.jpg);}
.t2{background:url(http://d.interjc.net/slider/t2.jpg);}
.t3{background:url(http://d.interjc.net/slider/t3.jpg);}
.t4{background:url(http://d.interjc.net/slider/t4.jpg);}
.t5{background:url(http://d.interjc.net/slider/t5.jpg);}
/*编辑以上的类更换背景图片*/
#nav {
	height:100%;
	background:#80D6FF;
	position:absolute;
	bottom:0;
}
#nav p.nav_button {
	position:absolute;
	right:8px;
	bottom:8px;
}
#nav p.nav_button a {
	padding:3px 5px;
	background:#AB1205;
	color:#FFF;
	text-decoration:none;
}
#nav p.nav_button a:hover, #nav p.nav_button a.nav_button_checked {
	background: #004E73;
}
#nav p.nav_title {
	position:absolute;
	top:5px;
	left:10px;
	line-height:24px;
}
#nav p.nav_title a {
	display:none;
	text-decoration:none;
	font-weight:bold;
	color: #005279;
}
#nav p.nav_title a:hover {
	text-decoration:underline;
}
.clear {
	line-height:0;
	clear:both;
}
#nav p.nav_title a.nav_title_checked {
	display:inline;
	background:#80D6FF;
}
</style>
 
<!--[if IE]>
<style type="text/css">
p.nav_button a{ display:block; float:left; margin:0 2px;}
</style>
<![endif]-->

<!--[if IE 6]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//anti IE6
    $('#anti_ie6 p strong a').click(function(){
        $('#anti_ie6').hide('slow');
    });
});
</script>
<style type="text/css">
#anti_ie6 {
	text-align:center;
	background:yellow;
	line-height:20px;
	font-size:14px;
	margin:5px 0;
}
#anti_ie6 p strong {
	padding:0 5px;
}
</style>
<![endif]-->

<!--[if IE 6]>
<div id="anti_ie6"><p>尊敬的用户，您正在使用老掉牙的IE 6.0，我们强烈推荐您升级为<a target="_blank" href="http://bit.ly/2zx2V">符合Web标准的浏览器</a>，更快，更好，更安全！<strong><a href="#">X</a></strong></p></div>
<![endif]-->