基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果

更新時(shí)間：2010年04月20日 19:20:44 作者：

有了jquery一切變的如此簡(jiǎn)單！讓js做的動(dòng)畫更有動(dòng)感。

好嘞！廢話不多說(shuō)！Code貼上！哪位高手有更好的方式可以多多指點(diǎn)！
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

復(fù)制代碼代碼如下:

 
<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="#">測(cè)試一</a> 
<a href="#">測(cè)試二</a> 
<a href="#">測(cè)試三</a> 
<a href="#">測(cè)試四</a> 
<a href="#">測(cè)試五</a> 
</div> 
<div id="playerNav"></div> 
</div> 
</div> 

JS Code

復(fù)制代碼代碼如下:

 
/* 
* images player 
* author:mr·zhong 
* date:2010-04-19 
*/ 
//當(dāng)前導(dǎo)航頁(yè)碼數(shù)字 
var currentPage = 1; 
//圖片間隔時(shí)間 
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++; 
} 
/* 
* 創(chuàng)建圖片頁(yè)碼·并綁定頁(yè)碼的click事件 
* count:需要?jiǎng)?chuàng)建頁(yè)面的個(gè)數(shù) 
*/ 
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); 
} 
} 
/* 
* 加載圖片集·并為圖片設(shè)定唯一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++; 
}); 
} 
/* 
* 加載圖片相對(duì)應(yīng)鏈接集·并為鏈接設(shè)定唯一ID，最后顯示對(duì)相應(yīng)的鏈接隱藏其它 
*/ 
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); 
} 
/* 
* 綁定圖片頁(yè)碼的click事件底層方法 
*/ 
function BindPageClick(id){ 
jquery("#" + id).click(function(){ 
PageClick(jquery(this)); 
}); 
} 
/* 
* 圖片頁(yè)碼Click處理方法 
* obj:當(dāng)前頁(yè)碼元素對(duì)象 
*/ 
function PageClick(obj){ 
var id = obj.attr("idx"); 
//當(dāng)頁(yè)碼在自動(dòng)播放的時(shí)候點(diǎn)擊了某個(gè)頁(yè)碼數(shù)字必須再重新賦值給當(dāng)前的currentPage記錄器 
currentPage = id; 
//設(shè)置所有頁(yè)碼樣式為默認(rèn) 
jquery("#playerNav a").removeClass("hover"); 
//設(shè)置當(dāng)前選中的頁(yè)碼數(shù)字為指定的顏色 
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); 
} 
}); 
} 
/* 
* 設(shè)置指定的元素或圖片顯示或不隱藏 
* obj:需要隱藏的元素 
* isShow:顯示or隱藏 
*/ 
function SetImageShowOrHide(obj,isShow){ 
if(!isShow){ 
obj.fadeOut(1000); 
}else{ 
obj.fadeIn(2000); 
} 
} 
/* 
* 設(shè)置指定的圖片頁(yè)碼樣式 
* obj:需要設(shè)置的元素 
* isSelect:是否選中 
*/ 
function SetPageColor(obj,isSelect){ 
if(!isSelect){ 
obj.removeClass("hover"); 
}else{ 
obj.addClass("hover"); 
} 
} 
/* 
* 設(shè)置圖片數(shù)字鏈接和圖片標(biāo)題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" }); 
} 