每5秒钟将课程随机应用于列表项

时间：2019-08-22 04:33:59

标签： javascript jquery html css

我有一个列表，其中有动画。.为此，我需要每5秒钟循环更改列表项的类别。

我有5个列表项，第一个没有一个。.一旦页面打开类必须分配给它们，例如“ card0”，“ card1”，“ card2”，“ card3”，“ card4”分别..然后每5秒钟就必须以循环方式互换

<div class="changelog">

    <ul class="entries">
        <li class="card0" style="transform: translateY(122px) scale(1.07);">
            <p class="meta">
                <strong>Connect</strong>
                <span>August 1</span>
            </p>
            <p>Platforms can now export connected account information as a CSV from the Dashboard.</p>
        </li>
        <li class="card1" style="transform: translateY(152px) scale(1);">
            <p class="meta">
                <strong>Terminal</strong>
                <span>July 30</span>
            </p>
            <p>You can now use WiFi to connect a P400 card reader to your point of sale application.</p>
        </li>
        <li class="card2" style="transform: translateY(182px) scale(0.934579);">
            <p class="meta">
                <strong>Connect</strong>
                <span>July 29</span>
            </p>
            <p>Express accounts now support 5 new languages (German, Italian, Japanese, Spanish, and Simplified Chinese) for the onboarding flow, dashboard, emails, and text messages.</p>
        </li>
        <li class="card3" style="transform: translateY(212px) scale(0.873439);">
            <p class="meta">
                <strong>Radar</strong>
                <span>July 22</span>
            </p>
            <p>Set rules with the new <code>is_off_session</code> attribute, which detects if a customer was charged anytime after they initially completed the checkout&nbsp;flow.</p>
        </li>
        <li class="card4" style="transform: translateY(272px) scale(0.816298);">
            <p class="meta">
                <strong>Mobile</strong>
                <span>July 19</span>
            </p>
            <p>Our updated mobile SDKs now support in-app 3D Secure 2 authentication, letting you customize the appearance of the authentication&nbsp;UI.</p>
        </li>
    </ul>
</div>

3 个答案:

答案 0 :(得分：2)

您必须使用setInterval检查代码段。

var step = 0;
var myInterval = setInterval(function() {
  if (step > 5) {
    clearInterval(myInterval);
    return false;
  }
  $('.entries li').addClass('card' + step);
  step++;

}, 2500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changelog">

  <ul class="entries">
    <li class="card0" style="transform: translateY(122px) scale(1.07);">
      <p class="meta">
        <strong>Connect</strong>
        <span>August  1</span>
      </p>
      <p>Platforms can now export connected account information as a CSV from the Dashboard.</p>
    </li>
    <li class="card1" style="transform: translateY(152px) scale(1);">
      <p class="meta">
        <strong>Terminal</strong>
        <span>July 30</span>
      </p>
      <p>You can now use WiFi to connect a P400 card reader to your point of sale application.</p>
    </li>
    <li class="card2" style="transform: translateY(182px) scale(0.934579);">
      <p class="meta">
        <strong>Connect</strong>
        <span>July 29</span>
      </p>
      <p>Express accounts now support 5 new languages (German, Italian, Japanese, Spanish, and Simplified Chinese) for the onboarding flow, dashboard, emails, and text messages.</p>
    </li>
    <li class="card3" style="transform: translateY(212px) scale(0.873439);">
      <p class="meta">
        <strong>Radar</strong>
        <span>July 22</span>
      </p>
      <p>Set rules with the new <code>is_off_session</code> attribute, which detects if a customer was charged anytime after they initially completed the checkout&nbsp;flow.</p>
    </li>
    <li class="card4" style="transform: translateY(272px) scale(0.816298);">
      <p class="meta">
        <strong>Mobile</strong>
        <span>July 19</span>
      </p>
      <p>Our updated mobile SDKs now support in-app 3D Secure 2 authentication, letting you customize the appearance of the authentication&nbsp;UI.</p>
    </li>
  </ul>
</div>

答案 1 :(得分：1)

此函数将轮换每个具有li类的card*元素的类。它获取当前类，将数字递增（模5），然后将其应用于元素。

var step = 0;
var myInterval = setInterval(function() {
  $('li[class^="card"]').each(function() {
     let thisclass = $(this).attr('class');
     let num = (1 + parseInt(thisclass.slice(-1))) % 5;
     let nextclass = 'card' + num;
     $(this).removeClass(thisclass).addClass(nextclass);
     });
}, 1000);
.card0 { background-color: red; }
.card1 { background-color: blue; }
.card2 { background-color: green; }
.card3 { background-color: yellow; }
.card4 { background-color: pink; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changelog">

  <ul class="entries">
    <li class="card0">
      <p class="meta">
        <strong>Connect</strong>
        <span>August  1</span>
      </p>
    </li>
    <li class="card1">
      <p class="meta">
        <strong>Terminal</strong>
        <span>July 30</span>
      </p>
    </li>
    <li class="card2">
      <p class="meta">
        <strong>Connect</strong>
        <span>July 29</span>
      </p>
    </li>
    <li class="card3">
      <p class="meta">
        <strong>Radar</strong>
        <span>July 22</span>
      </p>
    </li>
    <li class="card4">
      <p class="meta">
        <strong>Mobile</strong>
        <span>July 19</span>
      </p>
    </li>
  </ul>
</div>

答案 2 :(得分：1)

您可以遍历所有li元素并增加其类。

尝试以下代码段：

var ul = document.getElementsByClassName("entries");
var li = ul[0].children;

function increment(num) {
  if( (num + 1) > (li.length - 1) )
    return 0;
  return num + 1;
}

var interval = setInterval(function() {
  for(var i=0; i < li.length; i++) {
    var num = li[i].classList[0].substr(4);
    li[i].removeAttribute("class");
    li[i].setAttribute( "class", "card" + increment(parseInt(num)) );
  }
}, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="changelog">
  <ul class="entries">
    <li class="card0" style="transform: translateY(122px) scale(1.07);">
      <p class="meta">
        <strong>Connect</strong>
        <span>August  1</span>
      </p>
      <p>Platforms can now export connected account information as a CSV from the Dashboard.</p>
    </li>
    <li class="card1" style="transform: translateY(152px) scale(1);">
      <p class="meta">
        <strong>Terminal</strong>
        <span>July 30</span>
      </p>
      <p>You can now use WiFi to connect a P400 card reader to your point of sale application.</p>
    </li>
    <li class="card2" style="transform: translateY(182px) scale(0.934579);">
      <p class="meta">
        <strong>Connect</strong>
        <span>July 29</span>
      </p>
      <p>Express accounts now support 5 new languages (German, Italian, Japanese, Spanish, and Simplified Chinese) for the onboarding flow, dashboard, emails, and text messages.</p>
    </li>
    <li class="card3" style="transform: translateY(212px) scale(0.873439);">
      <p class="meta">
        <strong>Radar</strong>
        <span>July 22</span>
      </p>
      <p>Set rules with the new <code>is_off_session</code> attribute, which detects if a customer was charged anytime after they initially completed the checkout&nbsp;flow.</p>
    </li>
    <li class="card4" style="transform: translateY(272px) scale(0.816298);">
      <p class="meta">
        <strong>Mobile</strong>
        <span>July 19</span>
      </p>
      <p>Our updated mobile SDKs now support in-app 3D Secure 2 authentication, letting you customize the appearance of the authentication&nbsp;UI.</p>
    </li>
  </ul>
</div>

相关问题
最新问题