javascript - jQuery : Text on moving div (infinite wall)

Question

我需要制作一堵无限墙，它会从数据库中提取文本并将其显示在墙上。我写了这段代码-

$(function() {
    var x = 0;
    var y = 100.0;
    var z=0;
    setInterval(function() {
        x -= 0.1;
        y -= 0.1;
        z++;
        if (x <= -100.0){ 
            $("#h1d1").html("loop div 1 :" + z);
            x = 0;
        }
        if (y <= 0){
            $("#h1d2").html("loop div 2 :" + z);
            y = 100.0;
        }
        $('#movimg1').css('left', x + "%");
        $('#movimg2').css('left', y + "%");

    }, 10);
    $("#stopbutton").click(function() {
        $('#movimg1').stop();
    });
})

但是文本的行为并不像我希望的那样。它在我不想要的屏幕中间发生变化。我需要在不可见时更改文本。 https://jsfiddle.net/oa0wdxcx/2/

还有一些事情 - 我想添加一个播放/暂停按钮。任何关于我如何实现这一目标的建议将不胜感激。此外，我希望 div 位于 #wrap div 内，但如果我将位置属性更改为相对，则 div 不会保持在一起。

提前致谢。

Answer 1

问题出在条件上。

            if (x <= -100.0) {
                z++;
                $("#h1d1").html("loop div 1 :" + z);
                x = 100; /* change this line */ 

            }
            if (y <= -100.0) { /* change this line */ 
                w++;
                $("#h1d2").html("loop div 2 :" + w);
                y = 100;

            }

条件表明，如果这两个 div 中的任何一个达到 left:-100%，则该元素必须放在 left:100% 的队列末尾。

还有一件事，您可以组合这些 if 语句，并且只使用 x 进行转换。

要使开始和停止按钮起作用，您应该使用 clearInterval() 函数终止模拟以停止，然后调用 doSimulate() 重新开始:

        var started = true;

        $("#stopbutton").click(function () {
                if(started) {
                    clearInterval(sim);
                    $(this).html('Start');
                    started = false;
                }else{
                    doSimulate();
                    $(this).html('Stop');
                    started = true;
                }
            });

这是 jsFiddle With Start/Stop Working.