左图为下面代码的实例。右图为运用到项目中的方法
直接看图，看效果，有兴趣再继续了解！！！！！！
Jquery写的一个简单文字向上轮播插件。因为在项目中有运用到就自己写了一个。
顺便可以学习下简单的jQuery插件写法。。
点击，停止轮播！！！！！
文件名：l-slide.js//写了一个简单的插件，名字命名为 l-slide.js;(function ($) { ???$.fn.lSlide = function (options) { ???????initLSlide(this, options); ???}; ???function initLSlide(item,options) { ???????var defaults = { ???????????nTop:-0.71 ???????}; ???????var opts = $.extend({},defaults,options); ???????var _self = $(item); ???????var timeId = -1; ???????timeId = setInterval(function () { ???????????// 动画往上移动距离，单位为px ???????????_self.animate({top:opts.nTop + "px"},function () { ???????????????// 查到第一个子元素 ???????????????var ?item = _self.children(‘li‘)[0]; ???????????????// 获取第一个元素 ???????????????var ?fChild = ?$(item).prop(‘outerHTML‘); ??????????????// 将第一个节点拼接到最后 ???????????????_self.append(fChild); ???????????????// 将第一个节点删除 ???????????????$(item).remove(); ???????????}); ???????????_self.animate({top:0+ "px"},0); ???????},1000) ???????// 点击今日中奖名单停止轮播 ???????_self.on(‘touchstart‘,function () { ???????????clearInterval(timeId); ???????}) ???}})(jQuery)html代码：
必须引用JQuery<style> ???div{ ???????width: 200px; ???????height: 200px; ???????margin: 100px auto; ???????overflow: auto; ???} ???li{ ???????height: 20px; ???}</style><body> ???<div> ???????<ul id="ulContent"> ???????????<li>我是第1行文字</li> ???????????<li>我是第2行文字</li> ???????????<li>我是第3行文字</li> ???????????<li>我是第4行文字</li> ???????????<li>我是第5行文字</li> ???????????<li>我是第6行文字</li> ???????????<li>我是第7行文字</li> ???????????<li>我是第8行文字</li> ???????????<li>我是第9行文字</li> ???????????<li>我是第10行文字</li> ???????????<li>我是第11行文字</li> ???????????<li>我是第12行文字</li> ???????????<li>我是第13行文字</li> ???????????<li>我是第14行文字</li> ???????????<li>我是第15行文字</li> ???????????<li>我是第16行文字</li> ???????????<li>我是第17行文字</li> ???????????<li>我是第18行文字</li> ???????????<li>我是第19行文字</li> ???????????<li>我是第20行文字</li> ???????</ul> ???</div> ???<script src="jquery.min.js"></script> ???//引入上面写的插件 ???<script src="l-slide.js"></script> ???<script> ???????$(function(){ ???????????<!--获取li每行的高度，动画移动的高度--> ???????????var liHeight = $(‘li‘).height(); ???????????<!--调用插件--> ???????????$(‘#ulContent‘).lSlide({nTop:liHeight}); ???????}) ???</script></body>jQuery 文字向上轮播
原文地址：http://www.cnblogs.com/xiaoxiaossrs/p/7521556.html