Javascript 如何在JQuery中创建水平循环标记器

我正在开发一个在div的主体中循环文本的ticker。我可以让它以指定的速率移动文本，但是我很难弄清楚如何让JQuery循环文本。一旦div中的内容到达末尾，如何在仍然显示尾部的其余内容的同时将其循环回来

代码：

html:

开始文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本结束

---

当边距太远时，只需重置边距即可：

var width = $('.ticker-text').width(),
    containerwidth = $('.ticker-container').width(),
    left = containerwidth;
$(document).ready(function(e){
    function tick() {
        if(--left < -width){
            left = containerwidth;
        }
        $(".ticker-text").css("margin-left", left + "px");
        setTimeout(tick, 16);
    }
    tick();
});

---

下面是一个演示：

只是想把我的评论充实成一个答案：

如上所述，我相信您最好使用为这一目的而设计的现有框架之一。就快速提升该功能而言，您可以从以下内容开始：

JS:

注:

我不得不添加一些css，以阻止动画角色显示为块（因此在它们自己的行中）。您可能会使选择器更具体，以避免与页面上的其他动画发生冲突（如果有）

很明显，为了平滑起见，这可能需要进行一些时间调整——我不想费心去做后面那些微不足道的尝试和错误工作，但是很有趣（使用框架的另一个原因）

---

在我的评论中，我提到了slideLeft和slideRight方法——它们并不存在。我的错。

您需要将每个文本部分包装在一个元素中，然后在元素完全看不见时将其移回开头。您确定没有适合您的目的的轮子吗？如果你觉得有必要重新设计一个，有一个伟大的教程做垂直股票。您可以通过更改效果（例如，slideLeft而不是slideUp）和目标元素（一个快速而巧妙的解决方案是在“”上拆分字符串，然后用

包装每个字符）使其水平。也就是说，为什么不呢？

<div class = "ticker-container">
    <div class = "ticker-text">
        start text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text 
        text text text text text text text text text text text text text text text text end     
    </div>
</div>

var width = $('.ticker-text').width(),
    containerwidth = $('.ticker-container').width(),
    left = containerwidth;
$(document).ready(function(e){
    function tick() {
        if(--left < -width){
            left = containerwidth;
        }
        $(".ticker-text").css("margin-left", left + "px");
        setTimeout(tick, 16);
    }
    tick();
});

.ticker-text {
    height: 150%;
    white-space:nowrap;
    display:inline-block;
}

var tickerId="#tickerText";
function tickify(e) {
    var text=$(e).text().split("");
    var newText="";
    for (var i=0;i<text.length;i++) {
        newText+="<span class='tickerChar'>" + text[i] + "</span>";
    }
    $(e).html(newText);
}
tickify(tickerId);
function tick(){
    $(tickerId + " span.tickerChar:first").hide("slide",{direction:"left"},50,function(){$(this).appendTo($(tickerId)).show("slide",{direction:"right"},50);});
}
setInterval(function(){tick()},200);

<div id="tickerText">  woo, here is some text for ticking, text that ticks, ticky text to test with  </div>

div.ui-effects-wrapper {
    display:inline;
}