jquery实现向上无缝轮播文案

此处记录一下，方便以后用
1.html样式自己布局就可以了

<div class="myscroll">
     <ul>
         <li><div class="dixian"><span>张坤</span> 已获得 六角形大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>刘强</span> 已获得 儿童大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>李东</span> 已获得 室外充气大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>向阳</span> 已获得 水上娱乐大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>赵喜</span> 已获得 六角形大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>张帅</span> 已获得 六角形大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>刘力</span> 已获得 六角形大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>孙斌彦</span> 已获得 世界室内大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>王凌</span> 已获得 室外充气大蹦床运营方案...</div></li>
         <li><div class="dixian"><span>马山</span> 已获得 儿童大蹦床运营方案...</div></li>
     </ul>
 </div>

css样式

.myscroll {
    background-color: white;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #ccc;
    line-height: 30px;
    font-size: 12px;
    overflow: hidden;
}

js文件

(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:24 //每行的高度
    };

    var opts = $.extend({}, defaults, options),intId = [];

    function marquee(obj, step){

        obj.find("ul").animate({
            marginTop: '-=1'
        },0,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find("li").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }

        this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find("ul").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find("ul").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });

        });

    }

})(jQuery);

html也可以操控速度

<script>
    $(function(){
        $('.myscroll').myScroll({
            speed: 30, //数值越大，速度越慢
            //rowHeight: 26 //li的高度
        });
    });
</script>

以后遇到向上无缝轮播，可以直接拿来用

来源：CSDN

作者：一只胡萝卜

链接：https://blog.csdn.net/qq_36129701/article/details/82684044