Question

直截了当，我不知道如何让它自动循环。

                <center><table id = "match_01">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">Angelsim</span></td>
                        <td><img src = "https://a.ppy.sh/1777162_1453811024.png" width = "50"></td>
                        <td>#25</td>
                        <td>290 / 270</td>
                        <td>99.92%</td>
                    </tr>
                </table></center>

               <img src = "images/left_ar.png" id = "left_arrow" style = "left: 30%;position: absolute;"> <img src = "images/right_ar.png" style = "position:absolute;right: 30%;" id = "right_arrow"><h1>VS</h1>

                <center><table id = "match_001">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">_index</span></td>
                        <td><img src = "https://a.ppy.sh/652457_1449676530.png" width = "50"></td>
                        <td>#13</td>
                        <td>190 / 136</td>
                        <td>98.89%</td>
                    </tr>

                </table>






                    <!-- Second Player -->   
                <center><table id = "match_02">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">Cookiezi</span></td>
                        <td><img src = "https://a.ppy.sh/124493_1448724778.jpg" width = "50"></td>
                        <td>#1</td>
                        <td>290 / 270</td>
                        <td>99.92%</td>
                    </tr>
                </table></center>


               <div class = "invisble">  
               <img src = "images/left_ar.png" id = "left_arrow" style = "left: 30%;position: absolute;"> <img src = "images/right_ar.png" style = "position:absolute;right: 30%;" id = "right_arrow"><h1>VS</h1>
                </div>   


                <center><table id = "match_002">
                    <tr>
                        <th>Name</th>
                        <th>Avatar</th>
                        <th>Rank</th>
                        <th>Wins/Losses</th>
                        <th>Accuracy</th>
                    </tr>
                    <tr>
                        <td><span style="color:#29b;">Reimu-Desu</span></td>
                        <td><img src = "https://a.ppy.sh/948713_1453376392.png" width = "50"></td>
                        <td>#13</td>
                        <td>190 / 136</td>
                        <td>98.89%</td>
                    </tr>

                </table>
                    <div><b>Map:&nbsp;&nbsp;&nbsp;</b><span style="color:#29b;">Everything Will Freeze [Time Freeze]</span></header><br><br>
                    <button>Spectate</button></center>

这就是HTML。请在此处查看其余代码。

https://jsfiddle.net/t0kgg0uw/10/

基本上它一次播放循环..我怎样才能使这个无限。我不确定为什么JSfiddle显示奇怪但这里只有1次迭代的工作。

https://gyazo.com/74e16127c6b40130a2176644ef4360e3

真的需要解决这个问题。

Answer 1

制作一个无限循环（即while(true) {}）是一个坏主意，因为这可能会冻结/崩溃浏览器，就像choz所说。一个想法可能是将代码包装在window.setInterval(function() {}, <delay in milliseconds>);中。函数中的代码每<delay in milliseconds>毫秒运行一次（1秒= 1000毫秒）。

// Repeat every 20 seconds
window.setInterval(function() {
    // do something
}, 20000);

请参阅this Mozilla Developer Network listing。

Answer 2

我不打算编写所有代码，只是列出简单的基础知识

在函数中包装所有动画。无论最后的动画是什么，使用它的完成回调再次调用该函数。

function page_animations(){
    $("#match_01").delay(2000).animate({left: '-1200px'});
     $("#match_001").delay(2000).animate({left: '-1200px'});


     ....
     // longest aniimation
     $(selector).delay().animate({/* properties*/}, duration, function(){
           // is now complete ... call function to start over
           page_animations();
     });
}

在页面加载时调用函数以启动循环

$(function(){
   page_animations();
});

在重新开始之前，你需要做一些重新计算

如何让这个Jquery循环工作

2 个答案: