jQuery新闻滚动插件 jquery.roller.js

我在源码里给出了注释,有什么不足之处后或者可以改进的地方, 希望能够大家留言探讨...

效果图(比较朴素):

;(function($) { 
$.fn.roller = function(options) { 
var opts = $.extend({}, $.fn.roller.defaults, options), 
// 通过循环队列来管理滚动信息 
itemQueue = new Array(); 
return this.each(function(index) { 
var $div = $(this).addClass('roller-container'); 
// 用给定的数组进行初始化 
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 { 
//同样可以用页面元素进行初始化 
} 
// 把一开始要显示的条目加入容器中 
for(i = 0, len = opts.showNum; i < len; i++) { 
if(isUp()) { 
$div.append(itemQueue[i]); 
} else { 
$div.prepend(itemQueue[i]); 
} 
} 
// 把已经加入容器的条目副本 放到循环队列的尾部 
for(i = 0, len = opts.showNum; i < len; i++) { 
var temp = itemQueue.shift(); 
itemQueue.push(temp.clone()); 
} 
// 取得一个滚动元素 
var _item = $('.roller-item:first', this), 
// 取得它的外围高度 包括margin 
_outHeight = _item.outerHeight(true), 
// 容器的内容总高度 
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() { 
// 鼠标进入时 停止滚动 
opts.hold = true; 
}, function() { 
// 鼠标离开 重新开始滚动 
opts.hold = false; 
startRolling($(this)); 
}).trigger('mouseleave'); 
}); 
/** 
* 滚动方向判断 
*/ 
function isUp() { 
if(opts.direction === 'up') return true; 
if(opts.direction === 'down') return false; 
throw new Error('direction should be "up" or "down"'); 
} 
/** 
* 生成一个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() { 
// 是否停止滚动 
if(!opts.hold) { 
var first = null, 
_funSelf = arguments.callee; 
// 当前第一个元素 
first = $div.find('.roller-item:first'); 
first.animate({marginTop: opts.anim_marginTop}, 
opts.interval, 
function() { 
// 从队列中取出下一个条目 
var temp = itemQueue.shift(); 
// 把它的副本放到队列的尾部 
itemQueue.push(temp.clone()); 
if(isUp()) { 
// 移除当前第一个元素 
first.remove(); 
// 把刚取出的条目append到容器中 
$div.append(temp.hide()); 
} else { 
// 移除当前最后一个元素 
$div.find('.roller-item:last').remove(); 
// 让当前第一个元素的marginTop恢复成初始值 
first.css('margin-top', opts.orginal_marginTop + 'px'); 
// 把刚取出的条目prepend到容器中 
$div.prepend(temp.hide()); 
} 
temp.fadeIn(opts.interval - 50); 
// 触发下一个循环 
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]'; 
} 
}; 
// 滚动新闻默认配置 
$.fn.roller.defaults = { 
interval: 1000, // 滚动间隔 
showNum: 5, // 一次显示新闻数 
hold: false, // 是否停止滚动 
direction: 'up' // 滚动方向 
}; 
})(jQuery);

看下页面使用代码

<DIV id=container> 
</DIV> 
$('#container').roller({ 
showNum:4, //显示个数 
interval: 1500, //滚动的时间间隔 
direction: 'down', //滚动方向 
items: [{ //内容 
title: 'ccav滚动新闻1', //a的title属性 
html: 'ccav滚动新闻1', //a的innerHTML 
target: '_blank', //a的target 
href: 'http://www.google.com.hk' //a的href 
}, { 
title: 'ccav滚动新闻2', 
html: 'ccav滚动新闻2', 
target: '_blank', 
href: 'http://www.google.com.hk' 
}, { 
title: 'ccav滚动新闻3', 
html: 'ccav滚动新闻3', 
target: '_blank', 
href: 'http://www.google.com.hk' 
}, { 
title: 'ccav滚动新闻4', 
html: 'ccav滚动新闻4', 
target: '_blank', 
href: 'http://www.google.com.hk' 
}, { 
title: 'ccav滚动新闻5', 
html: 'ccav滚动新闻5', 
target: '_blank', 
href: 'http://www.google.com.hk' 
}, { 
title: 'ccav滚动新闻6', 
html: 'ccav滚动新闻6', 
target: '_blank', 
href: 'http://www.google.com.hk' 
}] 
});

在线演示 http://demo.3water.com/js/2011/news_roller_Demo/jquery.roller.html
打包下载 /201106/yuanma/news_roller_Demo.rar