仿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
"
});
}