当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿迅雷焦点广告效果(JQuery版)

Javascript
JQuery的ajax基础上的超强GridView展示
js表格分页实现代码
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Tab页界面，用jQuery及Ajax技术实现
用jQuery技术实现Tab页界面之二
通过JS 获取Mouse Position(鼠标坐标)的代码
javascript 必知必会之closure
jquery ajax 登录验证实现代码
jQuery 使用手册(一)
jQuery 使用手册(二)
jQuery 使用手册(三)
jQuery 使用手册(五)
用Javascript 获取页面元素的位置的代码
网页自动跳转代码收集
JS 连锁泡泡 v1.1
javascript的onchange事件与jQuery的change()方法比较
jquery 模式对话框终极版实现代码
javascript 页面划词搜索JS
javascript String split方法误操作
一个JS小玩意 几个属性相加不能超过一个特定值.

No. « 227 228 229 230 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 214 ::
收藏到网摘: n/a

今天写了一个放迅雷焦点广告的效果，还请大家多多指正，先附上效果图一张 首先是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>