Jquery1.4.2-based playback effect of the super-bright focus image of the imitation flash

Good luck! Not much nonsense! Code pasted! Which of the following experts has a better way to give more advice!
CSS code CopyCode The Code is as follows :/*
* 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 {
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 {
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 codeCopy codeThe Code is as follows: <Div id = "playerbox">
<Div id = "playerimage">
<Ul>
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
<Li> </LI>
</Ul>
</Div>
<Div id = "playernavandtitle">
<Div id = "playertitle">
<A href = "#"> Test 1 </a>
<A href = "#"> Test 2 </a>
<A href = "#"> Test 3 </a>
<A href = "#"> Test 4 </a>
<A href = "#"> Test 5 </a>
</Div>
<Div id = "playernav"> </div>
</Div>
</Div>

JS Code Copy code The Code is as follows :/*
* Images player
* Author: Mr Zhong
* Date: 2010-04-19
*/
// Number of the current navigation page
VaR currentpage = 1;
// Image Interval
VaR playertime = 3000;
Jquery (function (){
Setplayernavposition ();
Onloadingimages ();
Onloadinglinks ();
Setinterval ("Player ()", playertime );
});
/*
* Image playback method
*/
Function player (){
Pageclick (jquery ("# page _" + currentpage ));
If (currentpage = jquery ("# playernav a"). length)
Currentpage = 1;
Else
Currentpage ++;
}
/*
* Create an image page number and bind a page number Click Event
* Count: number of pages to be created
*/
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 );
}
}
/*
* Load the image set and set a unique ID for the image. The last one is to hide others.
*/
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 ++;
});
}
/*
* Load the corresponding link set of the image, set a unique ID for the link, and hide other
*/
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 );
}
/*
* Underlying method of the Click Event bound to the image page number
*/
Function bindpageclick (ID ){
Jquery ("#" + id). Click (function (){
Pageclick (jquery (this ));
});
}
/*
* Processing Method of Image page number click
* OBJ: The Element Object of the current page number.
*/
Function pageclick (OBJ ){
VaR id = obj. ATTR ("idx ");
// When the page number is automatically played, a page number must be assigned to the current currentpage recorder.
Currentpage = ID;
// Set all page number styles to default
Jquery ("# playernav a"). removeclass ("hover ");
// Set the currently selected page number to the specified color
Setpagecolor (OBJ, true );
// Display or hide an image
Jquery ("# playerimage li"). Each (function (){
If (jquery (this). ATTR ("ID") = ("play_img _" + id )){
Setimageshoworhide (jquery (this), true );
} Else {
Setimageshoworhide (jquery (this), false );
}
});
// Display or hide text chains
Jquery ("# playertitle a"). Each (function (){
If (jquery (this). ATTR ("ID") = ("link _" + id )){
Setimageshoworhide (jquery (this), true );
} Else {
Setimageshoworhide (jquery (this), false );
}
});
}
/*
* Set whether to display or hide the specified element or image.
* OBJ: Elements to be hidden
* Isshow: show or hide
*/
Function setimageshoworhide (OBJ, isshow ){
If (! Isshow ){
OBJ. fadeout (1000 );
} Else {
OBJ. fadein (2000 );
}
}
/*
* Set the page number of the specified image.
* OBJ: Elements to be set
* Isselect: whether to select
*/
Function setpagecolor (OBJ, isselect ){
If (! Isselect ){
OBJ. removeclass ("hover ");
} Else {
OBJ. addclass ("hover ");
}
}
/*
* Set the image digital link and the DIV position of the image title
*/
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 address