基于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 相关文章推荐
jQuery 美元符冲突的解决方法
Mar 28 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
回顾Javascript React基础
Jun 15 Javascript
javascript for循环性能测试示例
Aug 07 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
浅析php数据类型转换
2014/01/09 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
js中url对象化管理分析
2017/12/29 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
在Linux下调试Python代码的各种方法
2015/04/17 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
党支部书记四风问题整改措施
2014/09/24 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
心理学培训心得体会
2016/01/22 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
Python WSGI 规范简介
2021/04/11 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript