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中，但是如果我将position属性更改为relative，则div不会保持在一起。

提前致谢。

Answer 1

看看this JSFiddle，我又添加了一个以便顺利过渡回来......第三个应该包含与第一个相同的消息。

HTML

<body>
    <div class="row">
        <div class="col-xs-1"></div>
        <div id="wrap" class="col-xs-10">
            <div class="movimg message1" id="movimg1">
                 <h1 class="header">start div 1</h1>
            </div>
            <div class="movimg message2" id="movimg2">
                 <h1 class="header">start div 2</h2>
            </div>
            <div class="movimg message1" id="movimg3">
                 <h1 class="header">start div 1</h1>
            </div>
        </div>
        <div class="col-xs-1"></div>
    </div>
    <div class="row">
        <button class="button" id="startbutton" style="display:none;">Start</button>
        <button class="button" id="stopbutton">Stop</button>
    </div>
</body>

的JavaScript

$(function () {
    var x = 200.0;
    var interval;

    function start(){
        interval = setInterval(function () {
            x -= 0.1;
            if (x <= 0.0) {
                x = 200;
            }
            $('#movimg1').css('left', (x-200) + "%");
            $('#movimg2').css('left', (x-100) + "%");
            $('#movimg3').css('left', x + "%");
        }, 10);
    }

    start();

    $("#stopbutton").click(function () {
        window.clearInterval(interval);
        $(this).hide();
        $("#startbutton").show();
    });

    $("#startbutton").click(function () {
        start();
        $(this).hide();
        $("#stopbutton").show();
    });
})

CSS

body {
    overflow: hidden;
}
#wrap {
    width: 80%;
    left: 10%;
}
.movimg{
    position: absolute;
    height: 600px;
    width: 100%;
    background-image: url('https://s-media-cache-ak0.pinimg.com/736x/89/ed/e5/89ede56bcc8243787e55676ab28f287f.jpg');
}
#movimg1 {
    left: 0%;
}
#movimg2 {
    left: 100%;
}
#movimg3 {
    left: 200%;
}
.header {
    text-align: center;
}
.button{
    top: 600px;
    position: relative;
}

<强>更新

现在使用“停止”和“开始”按钮：JSFiddle

Answer 2

问题在于条件。

            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.

jquery：移动div上的文字（无限墙）

2 个答案: