jquery Banner 圖片自動輪換顯示

weixin_33941350發表於2010-11-30
ExpandedBlockStart.gif程式碼
<!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

 

ExpandedBlockStart.gif程式碼
.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 是個透明的背景圖片



 

相關文章