jQuery news scrolling plug-in jquery.roller.js_jquery

I have given comments in the source code. If there are any shortcomings or areas that can be improved, I hope everyone can leave a message to discuss...

Rendering (relatively simple):

Copy code The code is as follows:

;(function($) {
$.fn. roller = function(options) {
var opts = $.extend({}, $.fn.roller.defaults, options),
// Manage scrolling information through circular queue
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 ($('

').append(buildLink(opts.items[i])));
}
} else {
// You can also use page elements for initialization
}
// Add the items to be displayed initially into the container
for(i = 0, len = opts.showNum; i < len; i ) {
if(isUp()) {
$div.append(itemQueue[i]);
} else {
$div.prepend(itemQueue[i]);
}
}
//Put the copy of the item that has been added to the container to the end of the circular queue
for(i = 0, len = opts.showNum; i < len; i ) {
var temp = itemQueue. shift();
itemQueue.push(temp.clone());
}
// Get a rolling element
var _item = $('.roller-item:first', this) ,
// Get its outer height including margin
_outHeight = _item.outerHeight(true),
// The total height of the container’s 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($div.css('padding-top'), 10);
} else {
opts.anim_marginTop = opts.orginal_marginTop _outHeight;
}
// Initialize container styles and events
$div.css({
'height': totalHeight 'px',
'overflow': 'hidden'
}).hover(function() {
// Stop scrolling when the mouse enters
opts.hold = true;
}, function() {
// Restart scrolling when the mouse leaves
opts.hold = false;
startRolling( $(this));
}).trigger('mouseleave');
});
/**
* Scroll direction judgment
*/
function isUp() {
if(opts .direction === 'up') return true;
if(opts.direction === 'down') 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 $(' ').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() {
// Remove the next item from the queue An item
var temp = itemQueue.shift();
// Put its copy at the end of the queue
itemQueue.push(temp.clone());
if(isUp() ) {
// Remove the current first element
first.remove();
// Append the item just taken out into the container
$div.append(temp.hide() );
} else {
// Remove the current last element
$div.find('.roller-item:last').remove();
// Make the current first Restore the marginTop of each element to its initial value
first.css('margin-top', opts.orginal_marginTop 'px');
// prepend the just removed item into the container
$div.prepend (temp.hide());
}
temp.fadeIn(opts.interval - 50);
// Trigger the next loop
setTimeout(_funSelf, opts.interval);
});
}
}, opts.interval);
};
};
//Tool method collection
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 configuration of rolling news
$.fn.roller.defaults = {
interval: 1000, // Scroll interval
showNum: 5, //Number of news displayed at one time
hold: false, //Whether to stop scrolling
direction: 'up' //Scrolling direction
};
})( jQuery);

Look at the page usage code

Copy the code The code is as follows:

$('#container').roller({
showNum:4, //Display number
interval: 1500, //Scrolling time interval
direction: 'down', //Scrolling direction
items: [{ //Content
title: 'ccav scrolling news 1', //title of a Attributes
html: 'ccav scrolling news 1', //a's innerHTML
target: '_blank', //a's target
href: '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'
}]
}) ;

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