Question

大家好我需要循环浏览4个div并切换他们的课程。我需要一个完成切换类功能然后移动到下一个切换类然后切换下一个等等。在第四个切换到它的类后，循环需要从第一个开始并再次循环。到目前为止，这是我的破译代码：

＆＃13;

var i = 1;
$(document).ready(function() {
  if (i < 5) {
    setInterval(function() {
      $('#screen_' + i).toggleClass('over-to-charts-screen');
      setTimeout(function() {
        $('#screen_' + i).toggleClass('over-to-charts-screen');
      }, 1000);
    }, 5000)
    i++;
    cycle();
  } else {
    i = 0;
  }
});

＆＃13;

.over-to-charts-screen {
  padding-top: 38%;
  padding-bottom: 33%;
  background-color: #ec1d0c;
  background-color: rgba(255, 48, 0, .7);
  transition: background-color .7s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="pop-charts.html">
  <div class="to-chart-button" id="music_1">
    <div class="to-charts-screen screen_1" id="screen_1">
      <h5>Pop<br />Charts</h5>
    </div>
  </div>
</a>
<a href="rock-charts.html">
  <div class="to-chart-button" id="music_2">
    <div class="to-charts-screen screen_2" id="screen_2">
      <h5>Rock<br />Charts</h5>
    </div>
  </div>
</a>
<a href="country-charts.html">
  <div class="to-chart-button" id="music_3">
    <div class="to-charts-screen screen_3" id="screen_3">
      <h5>Country<br />Charts</h5>
    </div>
  </div>
</a>
<a href="latin-charts">
  <div class="to-chart-button" id="music_4">
    <div class="to-charts-screen screen_4" id="screen_4">
      <h5>Latin<br />Charts</h5>
    </div>
  </div>
</a>

＆＃13;

Answer 1

你带着一个工作小提琴：

我只是修改了一点CSS以使预览更具可读性。

修改您无需使用间隔来重置索引。更好的方法是使用类＆＃39; div＆＃39;循环遍历所有.to-charts-screen元素。

在每个间隔上，我将索引（var i）增加1并检查索引是否具有值3（这是最后 div）。如果这是真的，我们将其设置回0，即＆＃34;循环＆＃34;可以从头开始。

为了让事情变得更简单，我们只需删除每个刻度线上的类，然后使用新索引（{{1}将其附加到div }}）。

＆＃13;
＆＃13;
i
＆＃13;
$(function(){ var i = 0; var elems = $('.to-charts-screen'); setInterval(function () { $(elems).removeClass('over-to-charts-screen'); $(elems[i]).toggleClass('over-to-charts-screen'); i = (i == 3) ? 0 : i + 1; }, 1500) });
＆＃13;
.over-to-charts-screen { padding-top: 10px; padding-bottom: 10px; background-color: #ddd; transition: background-color .7s; }
＆＃13;
＆＃13;
＆＃13;

在每个循环中循环Divs切换类

1 个答案: