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