仿flash超炫焦点图播放器 · javascript for jquery

嘻嘻！~有了jquery一切变的如此简单！

最终效果图：

 

好嘞！废话不多说！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 " });
}

 

DEMO下载地址：http://files.cnblogs.com/keke/ImagePlayer.rar

转载于:https://www.cnblogs.com/keke/archive/2010/04/20/1715926.html