JQuery news rolling plug-in jquery. roller. js

I have provided comments in the source code. If there are any shortcomings or improvements, I hope you can leave a message to discuss them...

(Relatively simple ):

Copy codeThe Code is as follows:
; (Function ($ ){
$. Fn. roller = function (options ){
Var opts = $. extend ({}, $. fn. roller. defaults, options ),
// Use the cyclic queue to manage rolling Information
ItemQueue = new Array ();
Return this. each (function (index ){
Var $ div = $ (this). addClass ('roller-container ');
// Initialize with the given Array
If (opts. items & Util. isArray (opts. items )){
For (var I = 0, len = opts. items. length; I <len; I ++ ){
ItemQueue. push ($ ('<DIV class = roller-item> </DIV>'). 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 ());
}
// Obtain a Rolling Element
Var _ item = $ ('. roller-item: first', this ),
// Obtain its peripheral height including margin
_ OutHeight = _ item. outerHeight (true ),
// The 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(nvidiv.css ('padding-top'), 10 );
} Else {
Opts. anim_marginTop = opts. orginal_marginTop + _ outHeight;
}
// Initialize container styles and events
$Div.css ({
'Height': totalHeight + 'px ',
'Overflow': 'ddn'
}). Hover (function (){
// Stop scrolling when the mouse enters
Opts. hold = true;
}, Function (){
// Move the mouse away and start rolling again
Opts. hold = false;
StartRolling ($ (this ));
}). Trigger ('mouseleave ');
});
/**
* Rolling direction judgment
*/
Function isUp (){
If (opts. direction = 'up') return true;
If (opts. direction = 'low') return false;
Throw new Error ('direction shocould be "up" or "down "');
}
/**
* Generate A jQuery-encapsulated <A> </A>
*/
Function buildLink (item ){
Var html = item.html;
Delete item.html;
Return $ ('<A> </A> 'hangzhou.attr(item).html (html );
}
Function startRolling ($ div ){
SetTimeout (function (){
// Whether to stop scrolling
If (! Opts. hold ){
Var first = null,
_ FunSelf = arguments. callee;
// The 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 ('. roller-item: last'). remove ();
// Restore the marginTop of the first element to the initial value.
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 loop
SetTimeout (_ funSelf, opts. interval );
});
}
}, Opts. interval );
};
};
// Set of tool Methods
Var Util = {
ToString: function (v ){
Return Object. prototype. toString. apply (v );
},
// Determine whether it is an Array
IsArray: function (v ){
Return Util. toString (v) ===' [object Array] ';
}
};
// Default rolling news Configuration
$. Fn. roller. defaults = {
Interval: 1000, // scroll interval
ShowNum: 5, // number of news displayed at a time
Hold: false, // whether to stop scrolling
Direction: 'up' // scroll direction
};
}) (JQuery );

Check the code on the page.
Copy codeThe Code is as follows:
<DIV id = container>
</DIV>
$ ('# Iner'). roller ({
ShowNum: 4, // display number
Interval: 1500, // interval of scrolling
Direction: 'low', // scroll direction
Items: [{// content
Title: 'ccav rolling news 1', // The title attribute of
Html: 'ccav rolling news 1', // innerHTML of
Target: '_ blank', // target of
Href: 'http: // www.google.com.hk '// href of
},{
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'
}]
});

Online Demo http://demo.jb51.net/js/2011/news_roller_Demo/jquery.roller.html
Package download/201106/yuanma/news_roller_Demo.rar