仿迅雷焦点广告效果(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 特殊字符
Apr 05 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
Javascript浅谈之this
Dec 17 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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开发中常用的8个小技巧
2008/08/27 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
javascript new fun的执行过程
2010/08/05 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
vue如何截取字符串
2019/05/06 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Python如何输出警告信息
2020/07/30 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
代理商会议邀请函
2014/01/27 职场文书
水果超市创业计划书
2014/01/27 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
通知书大全
2015/04/27 职场文书
防暑降温通知书
2015/04/27 职场文书
少先队工作总结2015
2015/05/13 职场文书
党小组鉴定意见
2015/06/02 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript