废话一句都不说：请自己看代码 OK?
***************************************
具体结构图：
Baoqijie-->>>(注意都在它下面)
>>css(Baoqijie下面的)
..>>common.css(css下面的)
..>>index.css
>>images
..>>薄其杰.jpg
......(这里就省略啦！)
>>js
..>>jquery-1.4.2.js
..>>slider.js
index.html
效果图http://user.qzone.qq.com/736903501
①index.html页面代码如下：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/slider.js"></script> <link href="css/common.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> </head>
<body> <div id="wrapper"> <ul class="slider1"> <li ><a href="#"><img src="images/薄其杰.jpg" width="573" height="257" /></a></li> <li ><a href="#"><img src="images/薄其杰.jpg" width="573" height="257" /></a></li> <li ><a href="#"><img src="images/薄其杰.jpg" width="573" height="257" /></a></li> <li ><a href="#"><img src="images/薄其杰.jpg" width="573" height="257" /></a></li> </ul> <ul id="number"> <li id="buttom_0" class="selected">one</li> <li id="buttom_1" >two</li> <li id="buttom_2">three</li> <li id="buttom_3">four</li> </ul> </div> <p> </p> <p> </p>
<div class="content_right"> <div class="ad" > <ul class="slider" > <li><a href="#"><img src="images/buttom_0.jpg"/></a></li> <li><a href="#"><img src="images/buttom_1.jpg"/></a></li> <li><a href="#"><img src="images/buttom_2.jpg"/></a></li> <li><a href="3"><img src="images/buttom_3.jpg"/></a></li> </ul> <ul class="num" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> </body> </html>
***************************************
②index页面CS如下：
#wrapper { border:1px #ccc solid; position:relative; overflow:hidden; 573px; height:257px; font-size:14px; font-family:Tahoma, Geneva, sans-serif; } #number { 88px; position:absolute; left:10px; bottom:10px; } #number li { padding-left:6px; float:left; text-indent:-9999px; 16px; height:16px; overflow:hidden; background-image:url(../images/number1.png); background-repeat:no-repeat; } #buttom_0 { background-position:0 0; } #buttom_1 { background-position:-22px 0; } #buttom_2 { background-position:-44px 0; } #buttom_3 { background-position:-66px 0; } #buttom_0.selected { background-position:0 -16px; } #buttom_1.selected { background-position:-22px -16px; } #buttom_2.selected { background-position:-44px -16px; } #buttom_3.selected { background-position:-66px -16px; } /* */ .content_right{float:left;} .content_right .ad { margin-bottom:10px; 238px; height:256px; overflow:hidden; position:relative; } .content_right .slider,.content_right .num{ position:absolute; } .content_right .slider li{ list-style:none; display:inline; } .content_right .slider img{ 238px; height:256px; display:block; } .content_right .num{ right:5px; bottom:5px; } .content_right .num li{ float: left; color: #069; text-align: center; line-height: 16px; 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; overflow: hidden; margin: 3px 1px; border: 1px solid #069; background-color: #fff; } .content_right .num li.on{ color: #fff; line-height: 16px; 16px; height: 16px; font-size: 14px; margin: 3px 1px; border: 1px solid #069; background-color: #069; font-weight: bold; }
common样式如下：
/** css Reset star like bao**/
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, th, td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
ul,li{list-style:none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
/** css Reset end **/
***************************************
③jquery-1.4.2.js请自行引用（自带的脚本库）;
slider.js代码如下：
$(function(){
$('#number li').mouseover(function(){
$("#"+this.id).addClass("selected").siblings().removeClass("selected");
$('.slider1 li img').fadeIn(4000).attr("src","images/"+(this.id)+".jpg");
});
});
/*广告图片切换效果*/
$(function(){
var len = $(".num > li").length;
var index = 0;
var adTimer;
$(".num li").mouseover(function(){
index = $(".num li").index(this);
showImg(index);
}).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
$('.ad').hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index)
index++;
if(index==len){index=0;}
} , 2000);
}).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
var adHeight = $(".content_right .ad").height();
$(".slider").stop(true,false).animate({bottom : -adHeight*index},1000);
$(".num li").removeClass("on")
.eq(index).addClass("on");
}