我在源码里给出了注释,有什么不足之处后或者可以改进的地方, 希望能够大家留言探讨... 效果图(比较朴素): 复制代码 代码如下: ;(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.jb51.net/js/2011/news_roller_Demo/jquery.roller.html打包下载 /201106/yuanma/news_roller_Demo.rar

　　推荐阅读

　　基于Jquery实现表格动态分页实现代码

当页面点击分页图标时，程序会自动去后台获取对应页数的记录。 关键代码如下： 需要引入的css和js文件有： 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/cs>>>详细阅读

本文标题：jQuery新闻滚动插件 jquery.roller.js

地址：http://www.17bianji.com/kaifa2/JS/24478.html

 1/2    1