javascript - jQuery 单循环图像循环

Question

到目前为止，我有以下 jQuery，我对它很陌生，我试图在透明框架内循环一幅画的 22 个图像，但停在最后一个上。我正在使用以下 jQuery 代码:

function swapImages(){
  var $active = jQuery('#frame-gallery .active');
  var $next = ($active.next().length > 0) ? $active.next() : jQuery('#frame-gallery img:first');
  $active.removeClass('active');
  $next.addClass('active');
}
jQuery(document).ready($startSwap = function(){
  // Run our swapImages() function every 5secs
  setInterval('swapImages()', 120);
});

我一整天都在这个地方，尝试了clearInterval的各种地方，但它不起作用......

Answer 1

只需稍微更改一下 $next 的逻辑——仅在下一个节点存在时添加/删除类。如果 next 不存在则清除间隔:

var interval;

function swapImages(){
  var $active = jQuery('#frame-gallery .active');
  
  if ($active.next().length > 0) {
    $active.removeClass('active');
    $active.next().addClass('active');
  } else {
    clearInterval(interval);
  }
}

jQuery(document).ready($startSwap = function(){
  // Run our swapImages() function every 5secs
  interval = setInterval(swapImages, 300);
});

.active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="frame-gallery">
  <li class="active">a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>