;(function($) {
$.fn.roller = function(options) {
var opts = $.extend({}, $.fn.roller.defaults, options),
// 通過(guò)循環(huán)隊(duì)列來(lái)管理滾動(dòng)信息
itemQueue = new Array();
return this.each(function(index) {
var $div = $(this).addClass('roller-container');
// 用給定的數(shù)組進(jìn)行初始化
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 {
//同樣可以用頁(yè)面元素進(jìn)行初始化
}
// 把一開(kāi)始要顯示的條目加入容器中
for(i = 0, len = opts.showNum; i < len; i++) {
if(isUp()) {
$div.append(itemQueue[i]);
} else {
$div.prepend(itemQueue[i]);
}
}
// 把已經(jīng)加入容器的條目副本 放到循環(huán)隊(duì)列的尾部
for(i = 0, len = opts.showNum; i < len; i++) {
var temp = itemQueue.shift();
itemQueue.push(temp.clone());
}
// 取得一個(gè)滾動(dòng)元素
var _item = $('.roller-item:first', this),
// 取得它的外圍高度 包括margin
_outHeight = _item.outerHeight(true),
// 容器的內(nèi)容總高度
totalHeight = _outHeight * parseInt(opts.showNum, 10);
// 保存初始marginTop值
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;
}
// 初始化容器樣式和事件
$div.css({
'height': totalHeight + 'px',
'overflow': 'hidden'
}).hover(function() {
// 鼠標(biāo)進(jìn)入時(shí) 停止?jié)L動(dòng)
opts.hold = true;
}, function() {
// 鼠標(biāo)離開(kāi) 重新開(kāi)始滾動(dòng)
opts.hold = false;
startRolling($(this));
}).trigger('mouseleave');
});
/**
* 滾動(dòng)方向判斷
*/
function isUp() {
if(opts.direction === 'up') return true;
if(opts.direction === 'down') return false;
throw new Error('direction should be "up" or "down"');
}
/**
* 生成一個(gè)jQuery封裝的<A></A>
*/
function buildLink(item) {
var html = item.html;
delete item.html;
return $('<A></A>').attr(item).html(html);
}
function startRolling($div) {
setTimeout(function() {
// 是否停止?jié)L動(dòng)
if(!opts.hold) {
var first = null,
_funSelf = arguments.callee;
// 當(dāng)前第一個(gè)元素
first = $div.find('.roller-item:first');
first.animate({marginTop: opts.anim_marginTop},
opts.interval,
function() {
// 從隊(duì)列中取出下一個(gè)條目
var temp = itemQueue.shift();
// 把它的副本放到隊(duì)列的尾部
itemQueue.push(temp.clone());
if(isUp()) {
// 移除當(dāng)前第一個(gè)元素
first.remove();
// 把剛?cè)〕龅臈l目append到容器中
$div.append(temp.hide());
} else {
// 移除當(dāng)前最后一個(gè)元素
$div.find('.roller-item:last').remove();
// 讓當(dāng)前第一個(gè)元素的marginTop恢復(fù)成初始值
first.css('margin-top', opts.orginal_marginTop + 'px');
// 把剛?cè)〕龅臈l目prepend到容器中
$div.prepend(temp.hide());
}
temp.fadeIn(opts.interval - 50);
// 觸發(fā)下一個(gè)循環(huán)
setTimeout(_funSelf, opts.interval);
});
}
}, opts.interval);
};
};
//工具方法集合
var Util = {
toString: function(v) {
return Object.prototype.toString.apply(v);
},
// 判斷是否是Array
isArray : function(v){
return Util.toString(v) === '[object Array]';
}
};
// 滾動(dòng)新聞默認(rèn)配置
$.fn.roller.defaults = {
interval: 1000, // 滾動(dòng)間隔
showNum: 5, // 一次顯示新聞數(shù)
hold: false, // 是否停止?jié)L動(dòng)
direction: 'up' // 滾動(dòng)方向
};
})(jQuery);

<DIV id=container>
</DIV>
$('#container').roller({
showNum:4, //顯示個(gè)數(shù)
interval: 1500, //滾動(dòng)的時(shí)間間隔
direction: 'down', //滾動(dòng)方向
items: [{ //內(nèi)容
title: 'ccav滾動(dòng)新聞1', //a的title屬性
html: 'ccav滾動(dòng)新聞1', //a的innerHTML
target: '_blank', //a的target
href: 'http://www.google.com.hk' //a的href
}, {
title: 'ccav滾動(dòng)新聞2',
html: 'ccav滾動(dòng)新聞2',
target: '_blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav滾動(dòng)新聞3',
html: 'ccav滾動(dòng)新聞3',
target: '_blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav滾動(dòng)新聞4',
html: 'ccav滾動(dòng)新聞4',
target: '_blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav滾動(dòng)新聞5',
html: 'ccav滾動(dòng)新聞5',
target: '_blank',
href: 'http://www.google.com.hk'
}, {
title: 'ccav滾動(dòng)新聞6',
html: 'ccav滾動(dòng)新聞6',
target: '_blank',
href: 'http://www.google.com.hk'
}]
});