繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 仿迅雷焦点广告效果(JQuery版)
- Javascript
- jQuery中isFunction方法的BUG修复
- 将函数的实际参数转换成数组的方法
- javascript 删除数组中重复项（uniq）
- js 巧妙去除数组中的重复项
- javascript下一种表单元素获取方法存在的问题
- javascript 三种数组复制方法的性能对比
- js 多层叠的TAB选项卡
- javascript 自动标记来自搜索结果页的关键字
- 起点页面传值js,有空研究学习下
- javascript 的Document属性和方法集合
- JavaScript 使用简略语法创建对象的代码
- 使用JQuery进行跨域请求
- jquery 经典动画菜单效果代码
- jquery 常用操作方法
- js提示信息jtip封装代码，可以是图片或文章
- javascript面向对象的方式实现的弹出层效果代码
- jquery中的sortable排序之后的保存状态的解决方法
- js或css实现滚动广告的几种方案
- 使用JavaScript库还是自己写代码？
- js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)
Javascript 中的 仿迅雷焦点广告效果(JQuery版)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 88 ::
收藏到网摘: 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>
评论 (0) All
