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

JQuery plug-in production practice xMarquee plug-in V1.0_jquery

WBOY

Release： 2016-05-16 18:30:43

Original

1139 people have browsed it

Plug-in requirements
1. Move the elements in the list left or right. (Note, the up and down directions are the same. Use CSS to control the float direction of the list elements~)
2. Move the mouse to an element When the element is highlighted (CSS controlled), the player stops scrolling. After moving away, continue racing. .
3. Optional left and right manual navigation buttons.
jquery_xmarquee_m18
Principle of implementation
Just move the element at the end of the list to the front of the first element.
Future expansion (see if you need it in the future)
Multiple elements move at the same time; the effect when moving; callback function after movement; (Note: Using the callback function after movement can conveniently make a photo album plug-in , write it down if you are interested). Developers should remember one sentence: Do the simplest thing that could possibly work! Make the simplest and usable stuff, and don’t over-design it.
xMarquee API Description
1. DOM specification
See the source code below~ 2. CSS example
See the source code below~
3. Main method call

Copy code The code is as follows:

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 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 registration 
$(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); 

Package download address