Jquery plug-in production practices xmarquee plug-in V1.0

Plug-in requirements
1. Move the elements in the list to the left or right. (Note: the upper and lower directions are the same. Use CSS to control the float direction of the list element ~)
2. When you move the mouse over an element, change the element to highlighted (CSS control) and the player stops scrolling. Remove and continue to run the horse ..
3. You can select the left-right manual navigation button.

Implementation Principle
Move the element at the end of the list to the front of the first element.
Future extension (for more information, see later)
Multiple Elements move at the same time; effects when moving; callback functions after moving; (Note: using the callback function after moving, you can easily create an album plug-in and write it as you are interested in ). Developers should remember one sentence: do the simplest thing that cocould possibly work! Do not design too much for the simplest and most available stuff.
Xmarquee API description
1. Dom conventions
See the following source code ~ 2. CSS example
See the following source code ~
3. Main method call CopyCode The Code is as follows: <SCRIPT type = "text/JavaScript">
// <! [CDATA [
$ ("# Wk_featured_items"). xmarquee ({});
//]>
</SCRIPT>

Plug-in source code Copy code The Code is as follows:; (function ($ ){
// Private functions.
VaR P = {};
P. stop = function (EVT) {If (EVT) {$ (this ). addclass (P. _ opts. on) ;}; window. clearinterval (P. _ intervalid );};
P. Slide = function (){
If (P. _ opts. dir = 1 ){
P. _ I. Filter (": Last"). Hide (). fadein (P. _ opts. fadein). prependto (P. _ t );
} Else {
If (P. _ opts. vnum <p. _ CNT ){
P. _ I. Filter (": First"). fadeout (P. _ opts. fadeout). appendto (P. _ t );
P. _ I. Filter (": eq (" + P. _ opts. vnum + ")"). fadein (P. _ opts. fadein );
} Else {
P. _ I. Filter (": First"). Hide (). appendto (P. _ T). fadein (P. _ opts. fadein );
};
};
// Refresh
P. _ I = $ (P. _ opts. I, p. _ t );
// Visibility
P. _ I. Filter (": GT (" + (P. _ opts. vnum-1) + ")"). Hide ();
}; // Slide
P. Go = function (EVT ){
P. Stop ();
If (EVT ){
$ (This). removeclass (P. _ opts. On );
};
P. _ intervalid = Window. setinterval (function () {P. Slide () ;}, P. _ opts. interval );
}; // Go
// Main plugin body
$. FN. xmarquee = function (options ){
// Set the options.
Options = $. Extend ({}, $. FN. xmarquee. defaults, options );
P. _ opts = options;
// Go through the matched elements and return the jquery object.
Return this. Each (function (){
// Note: if wanna support multiple marquee instance, we shocould cache private variable via $ (this). Data ("V", V)
P. _ t = This; // marquee target;
// Silde items
P. _ I = $ (P. _ opts. I, p. _ t );
P. _ CNT = P. _ I. Size ();
P. _ intervalid = NULL;
// Hide unwanted items
P. _ I. Filter (": GT (" + (P. _ opts. vnum-1) + ")"). Hide ();
P. _ I. Hover (P. Stop, P. Go );
// Buttons registeration
$ (P. _ opts. btn0 ). click (function (EVT) {P. _ opts. dir = 0; p. stop (); p. slide (); Return false ;}). mouseout (P. go );
$ (P. _ opts. btn1 ). click (function (EVT) {P. _ opts. dir = 1; p. stop (); p. slide (); Return false ;}). mouseout (P. go );
// Trigger the slidebox
P. Go ();
});
};
// Public defaults.
$. FN. xmarquee. defaults = {
On: 'cur ',
I: 'lil', // slide items CSS Selector
Interval: 5000,
Fadein: 300,
Fadeout: 200,
Vnum: 4, // visible marquee items
Dir: 1, // marquee direaction.1 = right; 0 = left;
Btn0: '. prev', // Prev button
Btn1: '. next' // next button
};
}) (Jquery );

Package