Re-invent the wheel jquery news rolling plug-in

The task requires that you write a jquery news rolling plug-in, jquery. Roller. JS, which has relatively simple functions and may be added to Ajax for polling for a period of time.
The Dynamic Loading Function is provided below.Source codeIf necessary, you can download it directly. I have provided comments in the source code. If there are any shortcomings or improvements,
I hope you can leave a message to discuss this...

(Relatively simple ):

 
; (Function ($) {$. FN. roroller = function (options) {var opts = $. extend ({}, $. FN. roller. defaults, options), // use the cyclic queue to manage the rolling information itemqueue = new array (); return this. each (function (INDEX) {var $ DIV = $ (this ). addclass ('roller-container'); // initialize if (OPTs. items & util. isarray (OPTs. items) {for (VAR I = 0, Len = opts. items. length; I <Len; I ++) {itemqueue. push ($ ('
 

'). Append (buildlink (OPTs. items [I]);} else {// you can also use page elements for initialization} // Add the entry to be displayed at the beginning to the container for (I = 0, len = opts. shownum; I <Len; I ++) {If (ISUP () {$ Div. append (itemqueue [I]);} else {$ Div. prepend (itemqueue [I]) ;}// put the entry copy that has already been added to the container at the end of the loop queue for (I = 0, Len = opts. shownum; I <Len; I ++) {var temp = itemqueue. shift (); itemqueue. push (temp. clone ();} // get a Rolling Element VaR _ item = $ ('. roroller-item: First ', this), // obtain its peripheral height including Ma Rgin_outheight = _ item. outerheight (true), // the total height of the container content totalheight = _ outheight * parseint (OPTs. shownum, 10); // Save the initial margintop value opts. orginal_margintop = parseint(_item.css ('margin-top'), 10); If (ISUP () {opts. anim_margintop = opts. orginal_margintop-_ outheight-parseint(includiv.css ('padding-top '), 10);} else {opts. anim_margintop = opts. orginal_margintop + _ outheight;} // compile the container sample and event types div.css ({'height': Tota Lheight + 'px ', 'overflow': 'hidd '}). hover (function () {// stop rolling OPTs when the mouse enters. hold = true;}, function () {// move the mouse away and start rolling opts again. hold = false; startrolling ($ (this ));}). trigger ('mouseleave ') ;});/*** scroll direction judgment */function ISUP () {If (OPTs. direction = 'up') return true; If (OPTs. direction = 'shutdown ') return false; throw new error ('direction should be "up" or "down "');} /*** generate a jquery encapsulated */function buildlink (item) {Var html = item.html; Delete item.html; return detail (''{.attr(item}.html (HTML);} function startrolling ($ Div) {setTimeout (function () {// whether to stop scrolling if (! Opts. hold) {var first = NULL, _ funself = arguments. callee; // The current first element first = $ Div. find ('. roller-item: First '); first. animate ({margintop: opts. anim_margintop}, opts. interval, function () {// retrieve the next entry from the queue var temp = itemqueue. shift (); // put its copy at the end of the queue itemqueue. push (temp. clone (); If (ISUP () {// remove the first element first. remove (); // append the retrieved entry to the container $ Div. append (temp. hide ();} else {// remove the current last element $ Div. find ('. roroller-item: Last '). remove (); // restore the margintopic of the first element to the first.css ('margin-top ', opts. orginal_margintop + 'px '); // prepend the retrieved entry to the container $ Div. prepend (temp. hide ();} temp. fadein (OPTs. interval-50); // trigger the next cycle setTimeout (_ funself, opts. interval) ;};}}, opts. interval) ;};}; // tool method set var util ={ tostring: function (v) {return object. prototype. tostring. apply (v) ;}, // determine whether arrayisarray: function (v) {return util. tostring (v) = '[object array]' ;}}; // default rolling news configuration $. FN. roller. defaults = {interval: 1000, // rolling interval shownum: 5, // number of news displayed at a time hold: false, // whether to stop rolling ction: 'up' // scroll direction};}) (jquery );

Check the page usageCode

 
$ ('# Iner '). roller ({shownum: 4, // display number interval: 1500, // rolling interval ction: 'low', // rolling direction items: [{// content title: 'ccav rolling news 1', // Title attribute HTML of A: 'ccav rolling news 1', // innerhtmltarget of a: '_ blank', // targethref of: 'http: // www.google.com.hk '// A's href}, {Title: 'ccav rolling news 2', HTML: 'ccav rolling news 2', target:' _ blank ', href: 'http: // www.google.com.hk '}, {Title: 'ccav rolling news 3', HTML: 'ccav rolling news 3', target:' _ blank ', href: 'http: // www.google.com.hk '}, {Title: 'ccav rolling news 4', HTML: 'ccav rolling news 4', target:' _ blank ', href: 'http: // www.google.com.hk '}, {Title: 'ccav rolling news 5', HTML: 'ccav rolling news 5', target:' _ blank ', href: 'http: // www.google.com.hk '}, {Title: 'ccav rolling news 6', HTML: 'ccav rolling news 6', target:' _ blank ', href: 'http: // www.google.com.hk '}]});