基于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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
javascript数据类型验证方法
Dec 31 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 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
php中字符集转换iconv函数使用总结
2014/10/11 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
jQuery中each()方法用法实例
2014/12/27 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python exit出错原因整理
2020/08/31 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
毕业生的自我评价范文
2013/12/31 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
小学运动会加油稿
2015/07/22 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers