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

Source: Internet
Author: User
Tags prev

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 ({});

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);
P._i = $ (p._opts.i, p._t);
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
Vnum:4,//visible Marquee Items
Dir:1,//marquee Direaction.1=right;0=left;
Btn0: '. Prev ',//prev button
BTN1: '. Next '//next button
}) (JQuery);

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.