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少しのためのロジックを変更します - - 次のノードが存在する場合、クラスの追加/削除のみ。そして、明確な間隔は次の存在しない場合：

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>