基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果
更新時(shí)間：2010年04月20日 19:20:44 作者：
有了jquery一切變的如此簡(jiǎn)單！讓js做的動(dòng)畫(huà)更有動(dòng)感。
好嘞！廢話(huà)不多說(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
<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
/*
* 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" });
}
演示地址
下載地址
CSS Code
復(fù)制代碼 代碼如下:
/*
* 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" });
}
演示地址
下載地址
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)Flash效果上下翻動(dòng)的中英文導(dǎo)航菜單代碼
- jQuery仿Flash上下翻動(dòng)的中英文導(dǎo)航菜單實(shí)例
- 超炫的jquery仿flash導(dǎo)航欄特效
- 基于jQuery的仿flash的廣告輪播代碼
- 基于jQuery的仿flash的廣告輪播
- 基于Jquery的仿照f(shuō)lash放大圖片效果代碼
- jQuery實(shí)現(xiàn)的類(lèi)flash菜單效果代碼
- jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
- jquery+easeing實(shí)現(xiàn)仿flash的載入動(dòng)畫(huà)
- flash+jQuery實(shí)現(xiàn)可關(guān)閉及重復(fù)播放的壓頂廣告
- php+flash+jQuery多圖片上傳源碼分享
- jQuery模擬完美實(shí)現(xiàn)經(jīng)典FLASH導(dǎo)航動(dòng)畫(huà)效果【附demo源碼下載】
相關(guān)文章
jquery+CSS3模擬Path2.0動(dòng)畫(huà)菜單效果代碼
這篇文章主要介紹了jquery+CSS3模擬Path2.0動(dòng)畫(huà)菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
jQuery分頁(yè)插件jquery.pagination.js使用方法解析
這篇文章主要為大家詳細(xì)解析了jQuery分頁(yè)插件jquery.pagination使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼,可實(shí)現(xiàn)大幅廣告圖的漸顯效果及定時(shí)收縮功能,點(diǎn)擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
jQuery實(shí)現(xiàn)簡(jiǎn)單復(fù)制json對(duì)象和json對(duì)象集合操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單復(fù)制json對(duì)象和json對(duì)象集合操作,結(jié)合實(shí)例形式分析了jQuery使用extend方法操作json對(duì)象與json對(duì)象集合復(fù)制相關(guān)技巧,需要的朋友可以參考下2018-07-07
jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
這篇文章主要是對(duì)jQuery獲取Radio,CheckBox選擇的Value值進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這兩一直在看Jquery插件的開(kāi)發(fā)，上次在網(wǎng)上找了相關(guān)的文章，不過(guò)后來(lái)沒(méi)記來(lái)，再去找就難了。2011-01-01
為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
下面小編就為大家?guī)?lái)一篇為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果,通過(guò)jQuery結(jié)合html5的canvas技術(shù)調(diào)用時(shí)間函數(shù)實(shí)時(shí)進(jìn)行數(shù)學(xué)運(yùn)算,最終實(shí)現(xiàn)球體平拋及顏色動(dòng)態(tài)變換的效果,需要的朋友可以參考下2016-01-01
JQery 漸變圖片導(dǎo)航，效果不錯(cuò)，非常漂亮。2010-01-01
jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格，支持IE、Firefox、Safari、Chrome、Opera
在修改數(shù)據(jù)時(shí)，有時(shí)候?yàn)榱朔奖悖覀兿Ｍ軌蛑苯釉诒砀窭锩鎸?duì)數(shù)據(jù)進(jìn)行直接修改。2009-08-08