javascript图片切换效果

废话一句都不说：请自己看代码 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>

***************************************

②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");
}