Jony's Blog

在给一个客户做站时 (测试站) 要用到聚焦广告，网上简单搜了一下 Flash 版的都不太满意那些样式，后来萌发自己用 JQuery 写一个的想法，于是就做了，实现起来并不难，这里不得不赞叹一下 JQuery 的强大。

HTML 部分

<div id=”doFocus”>
    <img src=”ad/01.jpg” />
    <img src=”ad/02.jpg” />
    <div id=”focusNav”></div>
</div>

CSS 部分

#doFocus{ position:relative; width:694px; height:172px; border:2px #FFF solid; overflow:hidden;}
#doFocus img{ position:absolute; width:694px; height:172px; top:0px; left:0px;}
#focusNav{ position:absolute; top:142px; right:10px; z-index:2; opacity:0.8; filter:Alpha(Opacity=80);}
#focusNav a{ display:block; float:right; width:20px; height:20px; margin-left:10px; line-height:20px; text-align:center; background:#333; color:#FFF; font-weight:bold;}
#focusNav .thisclass,#focusNav a:hover{ background:#fff; color:#333;}

JS 部分

var ImgArr = $(‘#doFocus img’);
var MaxImg = ImgArr.length;
var NowImg = 0;
var NextImg = 0;
var ToImg = -1;
var ImgNav = ”;
var Status = 0;
var t;

for(i=0;i<MaxImg;i++){
    ImgNav = ‘<a id=”imgNav’+i+'” href=”javascript:void(0)” onclick=”changeImg(‘+i+’)”>’+(i+1)+'</a>’ + ImgNav;
    ImgArr.eq(i).hide();
    ImgArr.eq(i).css(“zIndex”,”0″);
}

ImgArr.eq(0).show();
$(‘#focusNav’).html(ImgNav);
$(‘#imgNav0’).addClass(“thisclass”);

function changeImg(ImgNum){
    if(Status == 1){
        ToImg = ImgNum;
    }else{
        clearTimeout(t);
        
        ToImg = -1;
        ImgNav = ”;
        NowImg = ImgNum;
        
        for(i=0;i<MaxImg;i++){
            ImgNav = ‘<a id=”imgNav’+i+'” href=”javascript:void(0)” onclick=”changeImg(‘+i+’)”>’+(i+1)+'</a>’ + ImgNav;
            ImgArr.eq(i).hide();
            ImgArr.eq(i).css(“zIndex”,”0″);
        }

        ImgArr.eq(NowImg).show();
        $(‘#focusNav’).html(ImgNav);
        $(‘#imgNav’+NowImg).addClass(“thisclass”);

        t = setTimeout(‘doFocus()’, 3000);
    }
}

function doFocus(){
    clearTimeout(t);
    
    Status = 1;
    NextImg = (NowImg + 1 == MaxImg) ? 0 : NowImg + 1 ;

    ImgArr.eq(NextImg).css(“zIndex”,”1″);
    ImgArr.eq(NowImg).css(“zIndex”,”0″);

    ImgArr.eq(NextImg).fadeIn(“slow”,function(){
        $(‘#imgNav’+NowImg).removeClass(“thisclass”);
        $(‘#imgNav’+NextImg).addClass(“thisclass”);
        ImgArr.eq(NextImg).css(“zIndex”,”0″);
        ImgArr.eq(NowImg).hide();
        Status = 0;

        if(ToImg>-1){
            if(ToImg!=NextImg){
                ImgArr.eq(ToImg).show();
                ImgArr.eq(NextImg).hide();
                $(‘#imgNav’+ToImg).addClass(“thisclass”);
                $(‘#imgNav’+NextImg).removeClass(“thisclass”);
            }
            NowImg = ToImg;
            ToImg = -1;
        }else{
            if(NowImg == MaxImg-1){
                NowImg = 0;
            }else{
                NowImg++;
            }
        }
        
        t = setTimeout(‘doFocus()’, 3000);
    });
}

t = setTimeout(‘doFocus()’, 3000);