左圖為下面代碼的實例。右圖為運用到項目中的方法 
直接看圖，看效果，有興趣再繼續了解！！！！！！
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>