jquery: 列表文字轮播

<div class="kft-enroll" id="textScroll">
                        <ul class="enroll-list">
                            <li class="enroll-item">
                                <span>137****5901</span>
                                <span class="name">蓝城桃花源看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>147****5901</span>
                                <span class="name">1-31看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>187****5901</span>
                                <span class="name">桃花源看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>137****5901</span>
                                <span class="name">蓝城花源看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>177****5401</span>
                                <span class="name">2-16看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>167****5901</span>
                                <span class="name">1-16看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>147****5901</span>
                                <span class="name">12.12看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>137****5901</span>
                                <span class="name">1.12看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>137****5901</span>
                                <span class="name">2.2看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>147****5901</span>
                                <span class="name">3.6看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>187****5901</span>
                                <span class="name">3.12看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>137****5901</span>
                                <span class="name">城桃花源看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                            <li class="enroll-item">
                                <span>167****5901</span>
                                <span class="name">蓝桃花源看房团</span>
                                <span class="time">2021/02/16</span>
                            </li>
                        </ul>
                    </div>

appendTo的用法:

(function ($) {
    FCZX.globalNamespace('FCZX.TextScroll');

    FCZX.TextScroll = function (opt) {
        var _this = this;
        _this.opt = $.extend({}, {
            scrollS: '#textScroll',
            scrollItemS: '.enroll-item',
            speed: 'normal',
            scrollNum: 1,
            timer: 1000
        }, opt || {})
        _this._init()
    }

    FCZX.TextScroll.prototype._init = function () {
        var _this = this;
        _this.$scroll = $(_this.opt.scrollS);
        _this.$item = $(_this.opt.scrollItemS);
        _this._scroller();
    }

    FCZX.TextScroll.prototype._scroller = function () {
        var _this = this;
        var _opt = _this.opt;
        var $list = _this.$scroll.find('ul:eq(0)');
        var itemHeight = _this.$item.height() * _opt.scrollNum;
        var timerId;
        var towardUp = function () {
            $list.animate({ marginTop: -itemHeight }, _opt.speed, function () {
                for (i = 0; i < _opt.scrollNum; i++) {
                    $list.find(_opt.scrollItemS + ":first").appendTo($list);
                }
                $list.css({ marginTop: 0 });
            })
        }
        var scrollerStop = function () {
            clearInterval(timerId);
        }
        var scrollerPlay = function () {
            timerId = setInterval(towardUp, _opt.timer);
        }
        $list.hover(scrollerStop, scrollerPlay).trigger("mouseout");
    }

})(jQuery);

new FCZX.TextScroll()

原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/14366804.html