jQuery 文字向上轮播

   左图为下面代码的实例。右图为运用到项目中的方法   

直接看图，看效果，有兴趣再继续了解！！！！！！

 

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>

 

posted @ 2017-09-14 16:58  笑笑~上善若水  阅读(5003)  评论(1)  编辑  收藏  举报