仿迅雷焦点广告效果(JQuery版)

231 阅读 0 评论 153 点赞

我是靠谱客的博主过时便当，最近开发中收集的这篇文章主要介绍仿迅雷焦点广告效果(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部分：

复制代码代码如下:

<div id="Images"> 
<a href="ceshi1.asp" 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="ceshi1.asp" target="_blank">测试一下1</a></div> 
<div id="AdDescription"><a href="ceshi1.asp" 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>