Maison > interface Web > js tutoriel > 基于jquery1.4.2的仿flash超炫焦点图播放效果_jquery

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

WBOY
Libérer: 2016-05-16 18:28:57
original
1261 Les gens l'ont consulté

好嘞!废话不多说!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
复制代码 代码如下:

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 pages += '' + i + '';
}
jquery("#playerNav").html(pages);
for(var i = 1; 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" });
}

演示地址
下载地址
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal