Jquery-based image phantom display source code _ jquery

Jquery-based image phantom display source code. For more information, see The Code is as follows:

// Image magic light display
$ (Function (){
Var imgPro = {
ImgWidth: 626, // Image Width
ImgConLength: 0, // total image Length
Index: 0, // index locked by navigation
Count: 0, // number of images
Left: 0, // absolute left
Pre:-1, // index of the previous image
Curr: 0, // current image Index
Next: 1, // index of the next image
Direction: 1, // automatic playback direction
InterTime: 3000 // Interval
}
AddImgAlt (imgPro. curr );
ImgPro. count = $ ('# banner. list a img'). length;
ImgPro. imgConLength = imgPro. imgWidth * imgPro. count;
ImgPro. left = parseInt ($ ('# box. list ul'faces .css ("left "));
// Playback Timer
Var t = setInterval (imgPlay, imgPro. interTime );
$ ('# Box. arrowl img, # box. arrowr img, # banner. list a, # box. count li, # box p'). hover (function (){
ClearInterval (t );
}, Function (){
T = setInterval (imgPlay, imgPro. interTime );
});
// Automatically play the image
Function imgPlay (){
If (imgPro. next! = ImgPro. count & imgPro. direction = 1) | (imgPro. pre =-1 & imgPro. direction =-1 )){
ImgPro. direction = 1;
ToNext ();
} Else {
ImgPro. direction =-1;
ToLast ();
}

}

// Click the left direction
$ ('# Box. arrowl img'). click (function (){
If (imgPro. curr! = 0 ){
ToLast ();
}
});
// Click the right direction
$ ('# Box. arrowr img'). click (function (){
If (imgPro. next! = ImgPro. count ){
ToNext ();
}
});
// Click the navigation bar to play the video.
$ ('# Box. count li'). click (function (){
ImgPro. index = $ ('# box. count li'). index (this );
If (imgPro. curr! = ImgPro. index ){
ImgPro. left + = (imgPro. curr-imgPro. index) * imgPro. imgWidth;
AddImgAlt (imgPro. index );
Play ();
$ ('# Box. count li '). eq (imgPro. curr ). removeClass ('current '). end (). eq (imgPro. index ). addClass ('current ');
ImgPro. curr = imgPro. index;
ImgPro. pre = imgPro. index-1;
ImgPro. next = imgPro. index + 1;
}
});
// Play
Function play (){
$ ('# Box. list ul'{.css ({
'Opacity ': '0. 5'
}). Animate ({
'Left': imgPro. left + "px ",
'Opacity ': '1'
}, 'Low ');
}

// Add Image Description
Function addImgAlt (index ){
$ ("# Box p"). text ($ ("# banner. list a img"). eq (index). attr ("alt "));
}

// Upload
Function toLast (){
ImgPro. left + = imgPro. imgWidth;
AddImgAlt (imgPro. pre );
Play ();
$ ('# Box. count li '). eq (imgPro. curr ). removeClass ('current '). end (). eq (imgPro. pre ). addClass ('current ');
ImgPro. pre --;
ImgPro. curr --;
ImgPro. next --;
}

// Next
Function toNext (){
ImgPro. left-= imgPro. imgWidth;
AddImgAlt (imgPro. next );
Play ();
$ ('# Box. count li '). eq (imgPro. curr ). removeClass ('current '). end (). eq (imgPro. next ). addClass ('current ');
ImgPro. pre ++;
ImgPro. curr ++;
ImgPro. next ++;
}

});