jquery Banner 图片自动轮换显示

代码

<! 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 >

< link  href ="banner.css"  rel ="stylesheet"  type ="text/css"   />
< script  type ="text/javascript"  src ="jquery.js" ></ script >
< script  type ="text/javascript"  src ="jquery.timers-1.2.js" ></ script >
< script  type ="text/javascript" >
$( function (){
           
     var  index = 0 ; // 显示图片集合索引
     var  speed = 4000 ; // 轮转速度
     var  showImgSpeed = 1000 ; // 图片渐显速度
     var  imageBigArray;
     var  imageSmallArray;
     var  minSmaopacity = 0.5 ;
     var  minBigopacity = 0.05 ;
     var  isAuto = 1 ; // 1=自动，2=停止
    
     function  init(){
        imageBigArray = $( " .bigimg " ); 
        imageSmallArray = $( " .smallimg " ); 
        $( " #top_banner_bottom " ).html( "" );
         var  tmp = "" ;
         for ( var  i = 0 ;i < imageSmallArray.length;i ++ ){
            tmp = " <img id='bannerImg_ " + i + " ' src=' " + imageSmallArray[i].src + " ' width='100' height='60'/></div> " + tmp;
            tmp = " <div id='m " + i + " ' class='imgblock'> " + tmp;
        }
        $( " #top_banner_bottom " ).html(tmp);
        
         for ( var  i = 0 ;i < imageSmallArray.length;i ++ ){
            $( " #m " + i).css({opacity: minSmaopacity});
            $( " #bannerImg_ " + i).hover(
               function  () {
                onOver( this .id.replace( " bannerImg_ " , "" ));
              },
               function  () {
                onOut( this .id.replace( " bannerImg_ " , "" ));
              }
            ); 
        }
        $( " #img_banner " ).attr( " src " ,imageBigArray[index].src).css({opacity:  0.1 }).animate({opacity:  1.0 },showImgSpeed);  
        $( " #m " + index).css({opacity: minSmaopacity}).animate({opacity:  1.0 },showImgSpeed);
    }
    
     function  changeImg(i){
        $( " #img_banner " ).animate({opacity:  1.0 },{duration:showImgSpeed});  
        $( " #m " + i).animate({opacity:  1.0 },{duration:showImgSpeed});
    }
     function  every(){
         if (isAuto == 1 ){
            $( " #m " + index).animate({opacity:minSmaopacity},{duration:showImgSpeed});
            $( " #img_banner " ).animate({opacity:minBigopacity },{duration:showImgSpeed,complete: function (){
                 if ((index + 1 ) < imageSmallArray.length){
                    index = index + 1 ;
                } else {
                    index = 0 ;
                }
                $( " #img_banner " ).attr( " src " ,imageBigArray[index].src)
                $(document).stopTime(); 
                $(document).everyTime(speed, every);  
                changeImg(index);
            }});    
        }
    }
     function  onOver(i){
        $(document).stopTime();
        isAuto = 0 ;
         for ( var  j = 0 ;j < imageSmallArray.length;j ++ ){
             if (j != i){
                $( " #m " + j).css({opacity: minSmaopacity});
            } else {
                index = i;
                $( " #img_banner " ).attr( " src " ,imageBigArray[i].src).css({opacity:  0.1 }).animate({opacity:  1.0 },showImgSpeed);  
                $( " #m " + j).css({opacity:  1.0 });
            }
        }
    }
     function  onOut(i){
        isAuto = 1 ;
        $( " #m " + i).css({opacity: minSmaopacity});
        $(document).everyTime(speed, every);
    }
    init();
    $(document).everyTime(speed, every)
});

</ script >

</ head >

< body >
< div  id ="top_banner"  class ="banner_style"    >
< img  id ="img_banner"  width ="800"  height ="250px"   />
     < div  id ="top_banner_bottom"  class ="banner_bottom" >
    
     < img  src ="1.jpg"  class ="bigimg"   />
     < img  src ="2.jpg"  class ="bigimg"   />
     < img  src ="3.jpg"  class ="bigimg"   />
    
     < img  src ="1-1.jpg"  class ="smallimg"   />
     < img  src ="2-2.jpg"  class ="smallimg"   />
     < img  src ="3-3.jpg"  class ="smallimg"   />
     </ div >
</ div >

</ body >
</ html >

CSS

 

代码

.banner_style {
    width : 800px ;  
    height : 250px ;
    position : relative ;  
    padding : 0px ;  border : 0px ;
}
.banner_bottom {
    width : 100% ;
    text-align : right ;  
    bottom : 0px ;  
    position : absolute ;
    height : 90px ;
    line-height : 90px ;
    vertical-align : middle ;
    overflow : hidden ;  
    display : table-cell ;
    background-image : url(banner_bg.png) 
}
.imgblock {
    float : right ;
    width : 100px ;
    height : 60px ;  
    margin-top : 12px ;  
    margin-right : 5px ;  
    border : 2px solid #FFF ;
    display : inline-block ;
    cursor : pointer ;
}

banner_bg.png 是个透明的背景图片