Question

我希望#house子图像添加类.active，但不能同时添加（当前，我的脚本正在这样做），首先，我希望第一个img元素获得类{{1 }}，然后无限循环

.active

    function ind(){
        $('#house').children().toggleClass('active');
    }
    setInterval(ind,2000);

        <div id="house">
            <img class="saxli" src="saxli.png">
            <img class="roof" src="roof.png">
            <img class="door" src="door.png">
            <img class="sabole" src="sabole.png">
            <img class="window1" src="window1.png">
            <img class="window2" src="window2.png">
        </div>

Answer 1

要实现此目的，您需要在每2秒调用一次的ind()函数中进行工作，该函数具有active类，然后将其移至下一个img。如果没有元素具有该类，或者最后一个元素具有该类，请再次使第一个img处于活动状态。试试这个：

var $imgs = $('#house img');

function ind() {
  var $current = $imgs.filter('.active').removeClass('active');
  var $target = $current.next();
  if ($target.length === 0)
    $target = $imgs.first();
    
  $target.addClass('active');
}

ind(); // call on page load
setInterval(ind, 2000); // call every 2 seconds

img {
  display: inline-block;
  border: 1px solid #C00;
  width: 50px;
  height: 50px;
}

.active {
  transform: scale(1.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="house">
  <img class="saxli" src="saxli.png">
  <img class="roof" src="roof.png">
  <img class="door" src="door.png">
  <img class="sabole" src="sabole.png">
  <img class="window1" src="window1.png">
  <img class="window2" src="window2.png">
</div>

Answer 2

您需要跟踪位置并增加/重置它。您可以执行以下操作：

function ind(){
  ind.children = ind.children || $('#house').children();
  ind.pos = ind.pos <= ind.children.length && ind.pos || 0;
  ind.children.removeClass('active');
  $(ind.children[ind.pos++]).addClass('active');

}
setInterval(ind,2000);

https://jsfiddle.net/r2zw4xks/

注意：由于jsfiddle不包含图片，因此我在类中添加了边框，因此您可以直观地看到它

每个孩子都做同样的事情，但间隔时间

2 个答案: