使用jQuery幻灯片滚动器从左到右移动文本答案

【问题标题】：Move text from left to right using jquery slide scroller使用jQuery幻灯片滚动器从左到右移动文本
【发布时间】：2017-02-07 07:57:48
【问题描述】：

我有这个用于滚动文本的脚本。

window.requestAnimationFrame = (function(){
            return  window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    function( callback ){
                        window.setTimeout(callback, 1000 / 60);
                    };
        })();

        var speed = 6000;
        (function currencySlide(){
            var currencyPairWidth = $('.slideItem:first-child').outerWidth();
            $(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
            });
            requestAnimationFrame(currencySlide);
        })();

HTML

<div class='slider'>
            <div class="edge"></div>
            <ul class="slideContainer" id="money_start">
            <li class="slideItem">
             <span>Vestibulum ante ipsum primis in faucibus orci luctus</span>
            </li>
            </ul>
        </div>

问题：它是从右到左滚动文本，但我想从左到右滚动文本。帮助我找到任何最佳解决方案。

【问题讨论】：

无法可视化，请发相应的html
我也添加了对应的html

标签： jquery html css scroll

【解决方案1】：

你的意思是这样吗？这似乎更容易。

$('.slideItem').animate({right: 0}, 1000);
$('.slideItem').animate({left: 0}, 1000);

.slideItem {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideItem">TEXT</div>

【讨论】：

这段代码只是从左到右移动，我需要像marque一样连续，但没有间隙。
你能分享一下jsfiddle或plunker吗？

【解决方案2】：

几行改变，动画从左到右发生（如您所愿）。

window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

            var speed = 600;
    (function currencySlide() {
        var currencyPairWidth = $('.slideItem:first-child').outerWidth();
        $(".slideContainer").css("marginLeft", -currencyPairWidth + 500);//Added this line
        $(".slideContainer").animate({ marginLeft: 75 }, speed, 'linear');
        requestAnimationFrame(currencySlide);
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='slider'>
        <div class="edge">
        </div>
        <ul class="slideContainer" id="money_start">
            <li class="slideItem"><span>Vestibulum ante ipsum primis in faucibus orci luctus</span>
            </li>
        </ul>
    </div>

【讨论】：