基于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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
关于JS模块化的知识点分享
Oct 16 Javascript
javascript实现前端分页功能
Nov 26 Javascript
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
VOLVO车载收音机
2021/03/02 无线电
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
Node.js的特点详解
2017/02/03 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python3监控疫情的完整代码
2020/02/20 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
实习生自荐信范文
2013/11/13 职场文书
公司董事长职责
2013/12/12 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
门面房租房协议书
2014/08/20 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
人事任命书范本
2015/09/21 职场文书
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers