好嘞！廢話不多說！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" });
}
演示地址
下載地址