javascript - 每隔几秒从 html 数组中的值更改类

Question

这个问题已经有答案了:

Change class every few seconds from values in array (5 个回答)

已关闭 7 年前。

我试图每 3 秒更改一次 div 的类。类位于数组中，应删除上一个类并添加下一个类。 “第一”应该是第一个，然后是“第二”，然后是“第三”，然后返回循环。

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'],
     	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