仿迅雷焦点广告效果(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 相关文章推荐
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
react native与webview通信的示例代码
2017/09/25 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
常用python数据类型转换函数总结
2014/03/11 Python
Python之PyUnit单元测试实例
2014/10/11 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python操作qml对象过程详解
2019/09/26 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
python 安装impala包步骤
2020/03/28 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
教学大赛获奖感言
2014/01/15 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
二人合伙经营协议书
2014/09/13 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python