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.jb51.net/js/2011/news_roller_Demo/jquery.roller.html
打包下载 /201106/yuanma/news_roller_Demo.rar
