基于jquery1.4.2的仿flash超炫焦点图播放效果


Posted in Javascript onApril 20, 2010

好嘞!废话不多说!Code贴上!哪位高手有更好的方式可以多多指点!
CSS Code

/* 
* images player 
* author:mr·zhong 
* date:2010-04-19 
*/ 
#playerBox{ 
width:305px; 
height:282px; 
border:1px solid #ccc; 
} 
#playerImage ul{ 
padding:0px; 
margin:0px; 
border:0px; 
list-style:none; 
position:absolute; 
} 
#playerImage ul li{ 
padding:0px; 
margin:0px; 
border:0px; 
list-style:none; 
position:absolute; 
} 
#playerImage li img{ 
width:305px; 
height:282px; 
border:0px; 
} 
#playerNavAndTitle{ 
z-index:10; 
position:absolute; 
height:50px; 
width:305px; 
background-color:#000; 
filter:alpha(opacity=60); 
-moz-opacity: 0.6; 
opacity: 0.6; 
} 
#playerNavAndTitle #playerTitle{ 
width:auto; 
height:20px; 
line-height:30px; 
text-indent:10px; 
} 
#playerNavAndTitle #playerTitle a{ 
color:#FFFFFF; 
text-decoration:none; 
font-weight:bold; 
position:absolute; 
font-size:15px; 
font-family:宋体; 
} 
#playerNavAndTitle #playerTitle a:hover 
{ 
color:Yellow; 
} 
#playerNavAndTitle #playerNav{ 
float:right; 
text-align:right; 
} 
#playerNavAndTitle #playerNav a{ 
float:left; 
display:block; 
background-color:#CC3300; 
border:1px solid #fff; 
width:15px; 
height:15px; 
margin:5px 5px; 
text-align:center; 
line-height:15px; 
text-decoration:none; 
color:#FFFFFF; 
cursor:pointer; 
font-family:宋体; 
} 
#playerNavAndTitle #playerNav .hover{ 
background-color:#FFFFFF; 
border:1px solid #cc3300; 
color:#CC3300; 
float:left; 
display:block; 
width:15px; 
height:15px; 
margin:5px 5px; 
text-align:center; 
line-height:15px; 
text-decoration:none; 
cursor:pointer; 
font-family:宋体; 
}

HTML Code
<div id="playerBox"> 
<div id="playerImage"> 
<ul> 
<li><img src="img/1.gif" /></li> 
<li><img src="img/2.gif" /></li> 
<li><img src="img/3.gif" /></li> 
<li><img src="img/4.gif" /></li> 
<li><img src="img/5.gif" /></li> 
</ul> 
</div> 
<div id="playerNavAndTitle"> 
<div id="playerTitle"> 
<a href="#">测试一</a> 
<a href="#">测试二</a> 
<a href="#">测试三</a> 
<a href="#">测试四</a> 
<a href="#">测试五</a> 
</div> 
<div id="playerNav"></div> 
</div> 
</div>

JS Code
/* 
* images player 
* author:mr·zhong 
* date:2010-04-19 
*/ 
//当前导航页码数字 
var currentPage = 1; 
//图片间隔时间 
var playerTime = 3000; 
jquery(function(){ 
SetPlayerNavPosition(); 
OnLoadingImages(); 
OnLoadingLinks(); 
setInterval("Player()",playerTime); 
}); 
/* 
* 图片播放方法 
*/ 
function Player(){ 
PageClick(jquery("#page_" + currentPage)); 
if(currentPage == jquery("#playerNav a").length) 
currentPage = 1; 
else 
currentPage++; 
} 
/* 
* 创建图片页码·并绑定页码的click事件 
* count:需要创建页面的个数 
*/ 
function CreatePageNberObj(count){ 
var pages = ''; 
for(var i = 1; i <= (count - 1); i++){ 
pages += '<a id="page_' + i + '" idx="' + i + '" onfocus="blur()">' + i + '</a>'; 
} 
jquery("#playerNav").html(pages); 
for(var i = 1; i <= count; i++){ 
BindPageClick("page_" + i); 
} 
} 
/* 
* 加载图片集·并为图片设定唯一ID,最后显示一张隐藏其它 
*/ 
function OnLoadingImages(){ 
var li_id = 1; 
jquery("#playerImage li").each(function(){ 
jquery(this).attr("id","play_img_" + li_id); 
if(li_id > 1){ 
SetImageShowOrHide(jquery(this),false); 
} 
li_id++; 
}); 
} 
/* 
* 加载图片相对应链接集·并为链接设定唯一ID,最后显示对相应的链接隐藏其它 
*/ 
function OnLoadingLinks(){ 
var a_id = 1; 
jquery("#playerTitle a").each(function(){ 
jquery(this).attr("id","link_" + a_id); 
if(a_id > 1){ 
SetImageShowOrHide(jquery(this),false); 
} 
a_id++; 
}); 
CreatePageNberObj(a_id); 
} 
/* 
* 绑定图片页码的click事件底层方法 
*/ 
function BindPageClick(id){ 
jquery("#" + id).click(function(){ 
PageClick(jquery(this)); 
}); 
} 
/* 
* 图片页码Click处理方法 
* obj:当前页码元素对象 
*/ 
function PageClick(obj){ 
var id = obj.attr("idx"); 
//当页码在自动播放的时候点击了某个页码数字必须再重新赋值给当前的currentPage记录器 
currentPage = id; 
//设置所有页码样式为默认 
jquery("#playerNav a").removeClass("hover"); 
//设置当前选中的页码数字为指定的颜色 
SetPageColor(obj,true); 
//显示或隐藏图片 
jquery("#playerImage li").each(function(){ 
if(jquery(this).attr("id") == ("play_img_" + id)){ 
SetImageShowOrHide(jquery(this),true); 
}else{ 
SetImageShowOrHide(jquery(this),false); 
} 
}); 
//显示或隐藏文字链 
jquery("#playerTitle a").each(function(){ 
if(jquery(this).attr("id") == ("link_" + id)){ 
SetImageShowOrHide(jquery(this),true); 
}else{ 
SetImageShowOrHide(jquery(this),false); 
} 
}); 
} 
/* 
* 设置指定的元素或图片显示或不隐藏 
* obj:需要隐藏的元素 
* isShow:显示or隐藏 
*/ 
function SetImageShowOrHide(obj,isShow){ 
if(!isShow){ 
obj.fadeOut(1000); 
}else{ 
obj.fadeIn(2000); 
} 
} 
/* 
* 设置指定的图片页码样式 
* obj:需要设置的元素 
* isSelect:是否选中 
*/ 
function SetPageColor(obj,isSelect){ 
if(!isSelect){ 
obj.removeClass("hover"); 
}else{ 
obj.addClass("hover"); 
} 
} 
/* 
* 设置图片数字链接和图片标题DIV位置 
*/ 
function SetPlayerNavPosition(){ 
var offset = jquery("#playerBox").offset(); 
var boxHeight = jquery("#playerBox").height(); 
var navHeight = jquery("#playerNavAndTitle").height(); 
jquery("#playerNavAndTitle").css({ top:(offset.top + boxHeight - navHeight) + 1 + "px", left:offset.left + 1 + "px" }); 
}

演示地址
下载地址
Javascript 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 #Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 #Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 #Javascript
jquery+json 通用三级联动下拉列表
Apr 19 #Javascript
javascript中的变量是传值还是传址的?
Apr 19 #Javascript
js获取当前select 元素值的代码
Apr 19 #Javascript
监控 url fragment变化的js代码
Apr 19 #Javascript
You might like
php计算当前程序执行时间示例
2014/04/24 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js快速排序的实现代码
2013/12/08 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
对python以16进制打印字节数组的方法详解
2019/01/24 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
集体备课反思
2014/02/12 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
南京导游词
2015/02/03 职场文书
重温入党誓词主持词
2015/06/29 职场文书
如何做好工作总结!
2019/04/10 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Redis三种集群模式详解
2021/10/05 Redis
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
python 远程执行命令的详细代码
2022/02/15 Python