_jquery of the effect of flash super-dazzle focus graph playing based on jquery1.4.2

All right! Don't say much nonsense! Code affixed! Which Master has a better way to a lot of guidance!
CSS Code

Copy Code code 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 a{
Color: #FFFFFF;
Text-decoration:none;
Font-weight:bold;
Position:absolute;
font-size:15px;
Font-family: Song body;
}
#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: Song body;
}
#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: Song body;
}

HTML Code

Copy Code code 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 one </a>
<a href= "#" > Test two </a>
<a href= "#" > Test three </a>
<a href= "#" > Test four </a>
<a href= "#" > Test five </a>
</div>
<div id= "Playernav" ></div>
</div>
</div>

JS Code

Copy Code code as follows:

/*
* Images player
* AUTHOR:MR Zhong
* date:2010-04-19
*/
Current Navigation page number
var currentpage = 1;
Picture time interval
var playertime = 3000;
jquery (function () {
Setplayernavposition ();
Onloadingimages ();
Onloadinglinks ();
SetInterval ("Player ()", playertime);
});
/*
* Picture Playback method
*/
function Player () {
Pageclick (jquery ("#page_" + currentpage));
if (currentpage = jquery ("#playerNav a"). Length)
CurrentPage = 1;
Else
currentpage++;
}
/*
* Create a picture page number • And bind the page number Click event
* Count: Number of pages that need 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 picture set · and set a unique ID for the picture, and finally show a hidden other
*/
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 picture relative to the link set · and set a unique ID for the link, and finally show the corresponding link to 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);
}
/*
* Bound Picture page number of Click event Bottom method
*/
function Bindpageclick (ID) {
jquery ("#" + ID). Click (function () {
Pageclick (jquery (this));
});
}
/*
* Picture page Number Click Processing method
* OBJ: Current page Number Element object
*/
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 numbering styles as default
jquery ("#playerNav a"). Removeclass ("hover");
Sets the currently selected page number to the specified color
Setpagecolor (obj,true);
Show or hide pictures
jquery ("#playerImage li"). each (function () {
if (jquery (this). attr ("id") = = ("play_img_" + ID)) {
Setimageshoworhide (jquery (this), true);
}else{
Setimageshoworhide (jquery (this), false);
}
});
Show or hide the text chain
jquery ("#playerTitle a"). each (function () {
if (jquery (this). attr ("id") = = ("LINK_" + ID)) {
Setimageshoworhide (jquery (this), true);
}else{
Setimageshoworhide (jquery (this), false);
}
});
}
/*
* Set the specified element or picture to show or not hide
* OBJ: Elements that need to be hidden
* Isshow: Show or hide
*/
function Setimageshoworhide (obj,isshow) {
if (!isshow) {
Obj.fadeout (1000);
}else{
Obj.fadein (2000);
}
}
/*
* Set the specified picture page number style
* OBJ: Elements that need to be set
* Isselect: whether to select
*/
function Setpagecolor (obj,isselect) {
if (!isselect) {
Obj.removeclass ("hover");
}else{
Obj.addclass ("hover");
}
}
/*
* Set picture Number link and picture title div location
*/
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
Download Address