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

Javascript
用户注册常用javascript代码
JavaScript 事件监听实例代码[兼容IE,firefox] 含注释
javascript appendChild,innerHTML,join性能比较代码
JavaScript 继承详解 第一篇
javascript 控制 html元素 显示/隐藏实现代码
Javascript 判断函数类型完美解决方案
获取URL地址中的文件名和参数的javascript代码
js 获取浏览器高度和宽度值(多浏览器)
FF IE兼容性的修改小结
JS URL传中文参数引发的乱码问题
javascript 24小时弹出一次的代码(利用cookies)
ie focus bug 解决方法
javascript concat数组累加 示例
javascript 触发事件列表 比较不错
当文本框的值发生改变时，触发事件，在IE中有效
javascript 操作table的特性
jquery判断单个复选框是否被选中的代码
关于javascript中的parseInt使用技巧
JavaScript 密码强度判断代码
js跨域和ajax 跨域问题的实现思路

No. « 155 156 157 158 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 235 ::
收藏到网摘: 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>