位置：首页>> 网络编程>> JavaScript>> 仿迅雷焦点广告效果（JQuery版）

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

　来源：delicacylee的专栏　发布时间：2009-08-03 14:18:00　

标签：迅雷,焦点,广告,jquery

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

首先是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部分：

投稿

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

猜你喜欢