在 JQuery 上找到了一个很好的自动收报机，但如何让它无限循环？

问题描述

我添加了一个代码，我的老师从 jQuery 推荐了我，效果很好，但是当文本完成时，它不会立即循环。文本不再从右边传来，只是从左边的屏幕上移开，当它完全消失时，整个事情重新开始。我希望有人知道我必须在代码中添加/更改什么以使其在第一轮文本完成后直接循环。

(function ($) {
    $.fn.newsTicker = function(options) {
        if($(this).length < 1) return this;

        var opt = $.extend(true,{
            base : {
                width : 2100,time : 40000
            },itemWidth : "auto",ticker : ".ti_news",tickerClone : "ti_clone",wrapper : ".ti_wrapper",slide : ".ti_slide",content : ".ti_content",callbacks : {
                beforeLoad : function($Ticker){},onLoad : function($current,$Ticker){},beforeAnimation : function($old,$current){},completeAnimation : function($old,isPaused : function($current,isResumed : function($current,$Ticker){}
            },core : {
                _getTime : function(w){
                    baseMargin=(typeof $contentTickers === "undefined") ? 0 : $contentTickers.first().css("margin-left");
                    baseMargin=(baseMargin<0)?baseMargin:0;
                    return opt.base.time * (w / (baseMargin + opt.base.width));
                },_contentWidth : function($tickers){
                    var w = 0;
                    if(opt.itemWidth !== "auto" && opt.itemWidth !== 0){
                        w = $tickers.length * opt.itemWidth;
                        $tickers.width(opt.itemWidth);
                    }else{
                        $tickers.each(function(){w = w + $(this).width()});
                    }
                    return Math.ceil(w+2);
                }
            }

        },options); 

        $(this).each(function(){
            var $Ticker = $(this);

                $Ticker.data("ticker",{
                    stop:true,animation:null
                });

            opt.callbacks.beforeLoad($(this));

            var $notizieTicker = $Ticker.find(opt.ticker),$wrapperTicker = $Ticker.find(opt.wrapper),$ti_slide = $Ticker.find(opt.slide),$contentTicker = $Ticker.find(opt.content);

            var width_content = opt.core._contentWidth($notizieTicker),wrapper_width = $wrapperTicker.width(),$current,$old = $();

            if(width_content < wrapper_width){
                var x = Math.ceil(wrapper_width/width_content),$clone = $contentTicker.children().clone();
                for (var i = 1; i <= x; i++) {
                    $contentTicker.append($clone.clone());
                }
                if(!opt.itemWidth || opt.itemWidth == "auto"){
                    width_content = width_content*i;
                }else{
                    width_content = ($contentTicker.children().length * opt.itemWidth);
                }
            }

            if(width_content * 3 > $ti_slide.width()) $ti_slide.width((width_content*3)+100);

            $ti_slide.append($contentTicker.clone().addClass(opt.tickerClone));
            $ti_slide.append($contentTicker.clone().addClass(opt.tickerClone));

            var $contentTickers = $Ticker.find(opt.content);
                $contentTickers.width(width_content);

            $current = $contentTickers.first();

            opt.callbacks.onLoad($current,$(this));

            var animateTicker = function(m){
                $ti_slide.append($old);
                var m = (typeof m == "undefined") ? 0 : m ; 
                $old.css("margin-left",m);

                opt.callbacks.beforeAnimation($old,$current);

                $Ticker.data("stop",false);
                var tickerAnimation = $current.animate({
                    "margin-left" : -width_content,},{
                    easing : "linear",duration : opt.core._getTime(width_content),complete : function(){
                        $old = $current;
                        $current = $current.next();
                        opt.callbacks.completeAnimation($old,$current);
                        animateTicker.call($Ticker);
                    }
                });
                $Ticker.data("animation",tickerAnimation);
            }

            animateTicker.call(this);

            $Ticker[0].pauseTicker = function(){
                $Ticker.each(function(){
                    var _anim = $Ticker.data("animation"),_stop = $Ticker.data("stop");
                    if(!!_stop || !_anim) return;
                    _anim.stop();
                    $Ticker.data("stop",true);
                    opt.callbacks.isPaused();
                });
            }

            $Ticker[0].startTicker = function(){
                $Ticker.each(function(){
                    if(!$Ticker.data("stop")) return;
                    animateTicker($Ticker);
                    $Ticker.data("stop",false);
                    opt.callbacks.isResumed();
                });
            }
        });

        return this;
    };

    $.fn.newsTickerPause = function(){
        $(this).each(function(){
            if("pauseTicker" in $(this)[0]) $(this)[0].pauseTicker();
        });
    }

    $.fn.newsTickerResume = function(){
        $(this).each(function(){
            if("startTicker" in $(this)[0]) $(this)[0].startTicker();
        });
    }

}( jQuery ));

.TickerNews {
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.ti_wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 50px;
}

.ti_slide {
  width: 30000px;
  position: relative;
  left: 0;
  top: 0;
}

.ti_content {
  width: 8000px;
  position: relative;
  float: left;
}

.ti_news { float: left; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="upcoming">
  <div class="TickerNews" id="T3">
      <div class="ti_wrapper">
          <div class="ti_slide">
              <div class="ti_content">
                  <div class="ti_news">
            text
          </div>
              </div>
          </div>
      </div>
    </div>
</div>

<script type="text/javascript">
            $(function(){
                _Ticker = $(".TickerNews").newsTicker();
                
        });
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）