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


Posted in Javascript onNovember 19, 2008

首先是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>

Javascript 相关文章推荐
javascript新手语法小结
Jun 15 Javascript
jquery中常用的SET和GET
Jan 13 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
js实现进度条的方法
Feb 13 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 #Javascript
js电信网通双线自动选择技巧
Nov 18 #Javascript
JavaScript脚本性能优化注意事项
Nov 18 #Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 #Javascript
js的闭包的一个示例说明
Nov 18 #Javascript
Ext面向对象开发实践(续)
Nov 18 #Javascript
Javascript打印网页部分内容的脚本
Nov 17 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
关于php中一些字符串总结
2016/05/05 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python用for循环求和的方法总结
2019/07/08 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
烹饪自我鉴定
2014/03/01 职场文书
食品安全承诺书范文
2014/08/29 职场文书
学生自我评语
2015/01/04 职场文书
医院科室评语
2015/01/04 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS