如何让这个Jquery循环工作

It's straight forward, I don't know how to keep making it auto loop.

这是直截了当的,我不知道如何让它自动循环。

                <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>

That's the HTML. See rest of the code here.

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

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

Basically it plays the loop once.. how can I make this infinite. I'm not sure why the JSfiddle displays odd but here is the working thing with just 1 iterance.

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

https://gyazo.com/74e16127c6b40130a2176644ef4360e3

Really Need to fix this.

真的需要解决这个问题。

2 个解决方案

#1

It would be a bad idea to make an infinite loop (i.e. while(true) {}), because that could freeze/crash the browser, like choz said. One idea could be wrapping your code in a window.setInterval(function() {}, <delay in milliseconds>);. The code in the function would run every <delay in milliseconds> milliseconds (1 second = 1000 milliseconds).

创建一个无限循环(即while(true){})是一个坏主意,因为这可能会冻结/崩溃浏览器,就像choz所说。一个想法可能是将您的代码包装在window.setInterval(function(){}, );.函数中的代码将以 <毫秒> 毫秒(1秒= 1000毫秒)的 <延迟运行。< p>

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

See this Mozilla Developer Network listing.

请参阅此Mozilla开发人员网络列表。

#2

I'm not going to write all the code, just lay out the simple basics

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

Wrap all the animations in a function. Whichever animation is at the end , use it's completion callback to call the function again.

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

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();
     });
}

On page load call the function to get the cycle started

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

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

You will need to do some figuring out of all the resets before they start again

在重新开始之前,您需要先解决所有重置问题

#1

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