仿迅雷焦点广告效果（JQuery版）

今天写了一个放迅雷焦点广告的效果，还请大家多多指正，先附上效果图一张：

相关文章：迅雷首页新闻图片轮播效果js源码

首先是JS代码部分，之前一定先引入JQuery包：

$(document).ready(function(){ 
    var imgUrl = new Array(); 
    var title = new Array(); 
    var description = new Array(); 
    var imgLink = new Array(); 
    var local; 
    var count; 
     
    local = 1;      //指针位置 
    count = 7;      //图片数量 
    imgUrl[1] = "Images/ceshi.jpg"; 
    imgUrl[2] = "Images/ceshi1.jpg"; 
    imgUrl[3] = "Images/ceshi.jpg"; 
    imgUrl[4] = "Images/ceshi1.jpg"; 
    imgUrl[5] = "Images/ceshi.jpg"; 
    imgUrl[6] = "Images/ceshi1.jpg"; 
    imgUrl[7] = "Images/ceshi.jpg"; 
    title[1] = "测试一下1"; 
    title[2] = "测试一下2"; 
    title[3] = "测试一下3"; 
    title[4] = "测试一下4"; 
    title[5] = "测试一下5"; 
    title[6] = "测试一下6"; 
    title[7] = "测试一下7"; 
    description[1] = "描述一下1"; 
    description[2] = "描述一下2"; 
    description[3] = "描述一下3"; 
    description[4] = "描述一下4"; 
    description[5] = "描述一下5"; 
    description[6] = "描述一下6"; 
    description[7] = "描述一下7"; 
    imgLink[1] = "ceshi1.asp"; 
    imgLink[2] = "ceshi2.asp"; 
    imgLink[3] = "ceshi3.asp"; 
    imgLink[4] = "ceshi4.asp"; 
    imgLink[5] = "ceshi5.asp"; 
    imgLink[6] = "ceshi6.asp"; 
    imgLink[7] = "ceshi7.asp"; 
     
    function showImage(){ 
        $("#Buttons div").each(function(){ 
            if($(this).attr("id") == "B"+local){ 
                $(this).attr("class","Menu_On"); 
                $(this).addClass("active"); 
                $("#AdImage").attr("src",imgUrl[local]); 
                $("#AdTitle a").html(title[local]); 
                $("#AdDescription a").html(description[local]); 
                $("#Images a").attr("href",imgLink[local]); 
            }else{ 
                $(this).removeClass("active"); 
                $(this).attr("class","Menu_Off"); 
            } 
        }); 
        local++; 
        if(local > count){ 
            local = 1; 
        } 
        theTimer = setTimeout(function(){showImage()},3000); 
    } 
     
    $("#Buttons div").click(function(){ 
        local = $(this).attr("id").replace("B",""); 
        var cid = $(this).attr("id"); 
        $("#Buttons div").each(function(){ 
            if($(this).attr("id") == cid){ 
                $(this).addClass("active"); 
                $("#AdImage").attr("src",imgUrl[$(this).attr("id").replace("B","")]); 
                $("#AdTitle a").html(title[$(this).attr("id").replace("B","")]); 
                $("#AdDescription a").html(description[$(this).attr("id").replace("B","")]); 
                $("#Images a").attr("href",imgLink[$(this).attr("id").replace("B","")]); 
            }else{ 
                $(this).removeClass("active"); 
                $(this).attr("class","Menu_Off"); 
            } 
        }); 
        window.clearInterval(theTimer); 
        showImage(); 
    }); 
    $("#Buttons div").mouseover(function(){ 
        if($(this).attr("id") != "Top"){ 
            $(this).css("cursor","pointer"); 
        } 
        if($(this).attr("class") == "Menu_Off"){ 
            $(this).attr("class","Menu_On"); 
        } 
    }); 
    $("#Buttons div").mouseout(function(){ 
        if($(this).attr("class") == "Menu_On"){ 
            $(this).attr("class","Menu_Off"); 
        } 
    }); 
     
    showImage(); 
});

然后是CSS部分：

body{ 
    margin:0px; 
    padding:0px; 
    background-color:#FFFFFF; 
} 
table,th,tr,td,div,span,p{ 
    font-size:9pt; 
} 
a:link{ 
    color:#FFFFFF; 
    text-decoration:none; 
} 
a:visited{ 
    color:#FFFFFF; 
    text-decoration:none; 
} 
a:active{ 
    color:#FFFFFF; 
    text-decoration:none; 
} 
a:hover{ 
    color:#FF0000; 
    text-decoration:none; 
} 
#Images{ 
    position:relative; 
    width:304px; 
    height:270px; 
    border:1px #b6cae3 solid; 
    background-color:#FFFFFF; 
} 
#Titles{ 
    width:100％; 
    height:73px; 
    right:0px; 
    bottom:0px; 
    background-color:#000000; 
    filter:alpha(opacity=40); 
} 
.Menu_On{ 
    float:right; 
    width:15px; 
    height:18px; 
    background-color:#000000; 
    margin-left:2px; 
    line-height:20px; 
    color:#FF0000; 
} 
.Menu_Off{ 
    float:right; 
    width:15px; 
    height:18px; 
    background-color:#000000; 
    margin-left:2px; 
    line-height:20px; 
    color:#FFFFFF; 
} 
#Top{ 
    float:right; 
    width:47px; 
    height:18px; 
    background-color:#000000; 
    filter:alpha(opacity=40,finishopacity=100,style=1,startx=0px,starty=18px,finishx=47px,finishy=18px); 
} 
#AdTitle{ 
    padding-top:10px; 
    padding-bottom:6px; 
    font-weight:bold; 
    color:#FFFFFF; 
    font-size:18px; 
    padding-left:10px; 
} 
#AdDescription{ 
    color:#FFFFFF; 
    padding-left:10px; 
}

最后是HTML部分：

<div id="Images"> 
    <a href=http://www.aspxhome.com target="_blank"><img src="Images/ceshi.jpg" border="0" id="AdImage" /></a> 
    <div style="position:absolute; right:0px; bottom:0px; height:73px; width:100％;"> 
    <div id="Titles"> 
        <div style="position:absolute; width:100％; height:73px;"> 
        <div id="AdTitle"><a href="http://www.cidianwang.com" target="_blank">测试一下1</a></div> 
        <div id="AdDescription"><a href="http://www.aspxhome.com" target="_blank">描述一下1</a></div> 
        <div id="Buttons" style="position:absolute; right:0px; bottom:0px; height:18px; width:100％;" align="right"> 
            <div id="B7" align="center" class="Menu_Off">7</div> 
            <div id="B6" align="center" class="Menu_Off">6</div> 
            <div id="B5" align="center" class="Menu_Off">5</div> 
            <div id="B4" align="center" class="Menu_Off">4</div> 
            <div id="B3" align="center" class="Menu_Off">3</div> 
            <div id="B2" align="center" class="Menu_Off">2</div> 
            <div id="B1" align="center" class="Menu_On active">1</div> 
            <div id="Top"></div> 
        </div> 
        </div> 
    </div> 
    </div> 
</div>