左图为下面代码的实例。右图为运用到项目中的方法 
直接看图，看效果，有兴趣再继续了解！！！！！！
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>
时间： 2024-10-17 12:50:17