Question

我有一个内容需要在3秒间隔内更改的div。我希望“top-3”部分每3秒更新3个名字。

<div class="grid-80 mobile-grid-100">
                <section class="top-3">
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#1 Juan Pablo Montoya</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#2 Tony Stewart</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#3 Mark Martin</p>
                    </div>
                </section>
            </div>

所以它将从上面开始，然后3秒后它会显示，

<div class="grid-80 mobile-grid-100">
                <section class="top-3">
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#4 New Name</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#5 New Name</p>
                    </div>
                    <div class="grid-33 mobile-grid-100">
                        <p class="pwr-ranking-name">#6 New Name</p>
                    </div>
                </section>
            </div>

我知道必须有一种更轻量级的方法，而不是运行内容滑块插件。谢谢！

Answer 1

也许是这样的？

<html>
  <head>
  </head>
  <body>
    <div class="grid-80 mobile-grid-100">
      <section class="top-3">
        <div class="grid-33 mobile-grid-100">
          <p class="pwr-ranking-name">#1 John</p>
        </div>
        <div class="grid-33 mobile-grid-100">
          <p class="pwr-ranking-name">#2 Anna</p>
        </div>
        <div class="grid-33 mobile-grid-100">
          <p class="pwr-ranking-name">#3 Marta</p>
        </div>
      </section>
    </div>
    <script type="text/javascript">
      var count = 3;
      var names = ['John', 'Anna', 'Marta', 'Mike', 'Alexandre', 'Olivier',  'Elisabeth', 'Angelina', 'Sophie'];
      var namesContainer = document.getElementsByClassName('pwr-ranking-name');
      setInterval(function(){
        for(var i = 0; i<3; i++){
          namesContainer[i].innerHTML = '#' + (count+1) + ' ' + names[count];
          count++;
          if(count == names.length){
            count = 0;
          };
        }
      }, 3000);
    </script>
  </body>
</html>

如何在设定的时间内更改div内的文本内容（3秒间隔）

1 个答案: