仿迅雷焦点广告效果(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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
js 学习笔记(三)
Dec 29 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
JS实现简单随机3D骰子
Oct 24 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
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python实现杨氏矩阵查找
2019/03/02 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
初级Java程序员面试题
2016/03/03 面试题
员工自我鉴定
2013/10/09 职场文书
酒店服务与管理毕业生求职信
2013/11/02 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
超市创意活动方案
2014/08/15 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
导游词之五台山
2019/10/11 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
windows安装python超详细图文教程
2021/05/21 Python