樣式：
<style type="text/css">
#slide
{
position: relative;
width: 917px;
height: 225px;
}
#pic_list
{
z-index: 2;
position: absolute;
list-style-type: none;
width: 100%;
bottom: 0px;
overflow: hidden;
list-style-image: none;
left: 0px;
}
#pic_list li
{
width: 160px;
float: left;
height: 62px;
padding-top: 10px;
line-height: 62px;
}
#pic_list li img
{
border: #fff 4px solid;
position: absolute;
margin: 0px 20px;
width: 65px;
height: 35px;
top: 18px;
}
#pic_list li span
{
color: #C7BEC5;
padding-left: 95px;
}
#this_pic
{
border-bottom: medium none;
position: absolute;
border-left: medium none;
width: 100%;
height: 100%;
border-top: medium none;
border-right: medium none;
}
#tran
{
z-index: 1;
position: absolute;
width: 100%;
bottom: 0px;
background: #000;
height: 60px;
border-top: #fff 2px solid;
left: 0px;
}
.adCs
{
color: #FFFFFF;
font-weight: bold;
}
</style>
js：
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var theInt = null;
var curclicked = 0;
$(document).ready(function(){
$('#tran').css('opacity','0.4');//設置span的透明度
$('#pic_list img').css({'opacity':'0.6'});
$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
$('#pic_list a').click(function(){return false});
t(0);
$('#pic_list img').mouseover(function(){//懸浮小圖片切換顯示的大圖片
if($('#this_pic').attr('src') == $(this).attr('src')) return;
t($('#pic_list img').index($(this)));//获取当前悬浮的图片索引
});
});
t = function(i){
clearInterval(theInt);
if( typeof i != 'undefined' )
curclicked = i;
$('#this_pic').fadeOut(0).fadeIn(200).attr('src',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#pic_list img').eq(i).parents('a').next().css({color:"#FFFFFF",fontWeight:"bold"});//给字体加粗
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},0);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},0);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
var j=$("#pic_list li").length;//获取li的个数
for(var a=0;a<j;a++ ){
if(i!=a){
$('#pic_list img').eq(a).parents('a').next().css({color:"",fontWeight:""});//取消粗体
}
}
theInt = setInterval(function(){
i++;
if (i > $('#pic_list img').length - 1) {i = 0};
$('#this_pic').fadeOut(0).fadeIn(200).attr('',$('#pic_list img').eq(i).attr('src'));
$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
$('#pic_list img').eq(i).parents('a').next().css({color:"#FFFFFF",fontWeight:"bold"});//给字体加粗
$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:15,opacity:0.6},0);
$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:15,opacity:0.6},0);
$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
var j=$("#pic_list li").length;//获取li的个数
for(var a=0;a<j;a++ ){
if(i!=a){
$('#pic_list img').eq(a).parents('a').next().css({color:"",fontWeight:""});//取消粗体
}
}
},3000)
}
</script>
html：
<!--輪播 start-->
<div id="slide">
<a id="this_a" href="javascript:void(0)">
<img id="this_pic" alt="" src="images/image1.jpg" /></a>
<ul id="pic_list">
<li><a href="javascript:void(0)">
<img alt="" src="images/image1.jpg" /></a><span>网络维护</span></li>
<li><a href="javascript:void(0)">
<img alt="" src="images/image2.jpg" /></a><span>培训教育</span></li>
<li><a href="javascript:void(0)">
<img alt="" src="images/image3.jpg" /></a><span>在线课堂</span></li>
<li><a href="javascript:void(0)">
<img alt="" src="images/image4.jpg" /></a><span>系统开发</span></li>
<li><a href="javascript:void(0)">
<img alt="" src="images/image5.jpg" /></a><span>联系我们</span></li></ul>
<span id="tran"></span>
</div>
<!--輪播 end-->