通过Divs切换课程每个循环

Question

大家好我需要循环4个divs并切换课程。我需要一个完成切换类功能，然后移动到下一个切换类然后下一个等等。在第四次切换到课程之后，循环需要从第一个开始，然后再循环。这里是我的断码迄今：

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

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

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

Answer 1

你去那里有一个工作小提琴：

我只是修改CSS一点使预览更易读。

编辑： 您的方式使用间隔来重置您的索引不需要这个工作。更好的方法是遍历所有div元素与类“.to-charts-screen”。

在每个间隔I通过1递增指数（var i），并检查索引具有值3（这是最后 DIV）。当这是真的，我们将它设置回0，“循环”可以从头再次开始。

使事情更简单，我们只是取消对每个替类，只是它与新的索引（i）追加到div。

$(function(){ 
 
\t var i = 0; 
 
    var elems = $('.to-charts-screen'); 
 
\t setInterval(function() { 
 
    \t \t $(elems).removeClass('over-to-charts-screen'); 
 
    \t \t $(elems[i]).toggleClass('over-to-charts-screen'); 
 
      i = (i == 3) ? 0 : i + 1;   
 
\t }, 1500) 
 
});

.over-to-charts-screen { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: #ddd; 
 
    transition: background-color .7s; 
 
}

<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 over-to-charts-screen" 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>