数秒ごとにhtmlの配列の値からクラスを変更します

Question

divのクラスを3秒ごとに変更しようとしています。クラスは配列であり、前のクラスを削除し、次のクラスを追加する必要があります。 「最初」が最初、次に「2番目」、次に「3番目」、そしてループに戻ります。

jQuery(document).ready(function ($) { 
 
    var images = ['first', 'second', 'third']; 
 

 
    function changeBackground() { 
 
     var className = $('#main').attr('class'); 
 
     if (className == null) 
 
      className = images[0]; 
 

 
     $('#main').removeClass(function() { 
 
      var newClass = // find value in array and take next value, if end of array get first 
 
       $(this).addClass(newClass); 
 
     }); 
 
    } 
 

 
    changeBackground(); 
 
    setInterval(changeBackground, 2000); 
 
});

<div id="main"></div> 
 

 

Answer 1

jQuery(document).ready(function($) { 
 
    var images = ['first', 'second', 'third'], 
 
     \t i = 0; 
 

 
    function changeBackground() { 
 
     $('#main').attr('class', images[i++]); 
 
     i = i % images.length; 
 
    } 
 

 
    changeBackground(); 
 
    setInterval(changeBackground, 2000); 
 
});

#main { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
.first { 
 
    background-color: #f01 !important; 
 
} 
 

 
.second { 
 
    background-color: blue; 
 
} 
 

 
.third { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<div id="main"></div>

enter link description here