基于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具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
Js的Array数组对象详解
Feb 22 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
详解js创建对象的几种方法及继承
Apr 12 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
js微信分享API
2020/10/11 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python读取注册表中值的方法
2013/04/08 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python实现简单socket通信的方法
2016/04/19 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python对象的属性访问过程详解
2020/03/05 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
出纳的岗位职责
2013/11/09 职场文书
小学教师国培感言
2014/02/08 职场文书
拉拉队口号
2014/06/16 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书