jquery Banner 圖片自動輪換顯示

weixin_33941350發表於2010-11-30
jQuery
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 是個透明的背景圖片



 

相關文章