JQuery plug-in production practices xMarquee plug-in V1.0

JQuery Plug-in production practice Xmarquee plugin V1.0

1, move the elements in the list to the left or right. (note, the upper and lower directions are the same, with CSS Tutorial control list element float direction can ~)
2, when the mouse moves to an element, change element highlighting (CSS control), the player stops scrolling. Move on and continue racing.
3, optional Manual navigation button.

Implementation principle
Move the element at the end of the list before the first element.
Future expansion (see it later)
Multiple elements moving at the same time, the effect of moving, the callback function after the move; (note: The use of the mobile callback function can be convenient to do a photo album plugin, interested in writing down). The developer should remember one word: do the simplest thing that could possibly work! Do the simplest available stuff, don't overdo it.
Xmarquee API Description
1,dom statute
Look at the following source tutorial ~2,css sample
Look at the source code here ~
3, the Main method call
Copy code code as follows:
<script type= "Text/javascript Tutorial" >
<! [cdata[
$ ("#wk_featured_items"). Xmarquee ({});
]]>
</script>

Plug-in source
Copy code code 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 (": a"). Fadeout (P._opts.fadeout). Appendto (p._t);
P._i.filter (": eq (" + p._opts.vnum +) "). FadeIn (P._opts.fadein);
} else {
P._i.filter (": a"). 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 should 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: ' Li ',//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);