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

Change class every few seconds from values in array in html

本文关键字：数组 html 几秒      更新时间：2023-09-26

我正在尝试每 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>
    

 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>

在此处输入链接说明

相关文章：