どのようにカルーセルを自動化するか

Question

私は、クリックしたボタンに応じて1つのステップを左右に動かす独自のカルーセルを作成しています。コードの部分が期待どおりに機能するため、ここには含まれていません。

私が達成できないことは、ページが読み込まれたときにカルーセルを自動化または回転させることです。つまり、4秒または5秒ごとに、現在のアクティブな要素が次の要素に移動する必要があります。

以下のコードは私の現在の試みを示しています。

$('.promo-nav').show(); 
function rotate() { 
    var showid = 0; 
    if(!$(this).parent().parent().hasClass('active')){    
     id = $(this).parent('li').index();    
     $(this).parent().parent().children('li.active').removeClass('active'); 
     $(this).parent().addClass('active'); 
     $(this).parent().parent().parent().parent().parent() 
      .children('.promo-carousel-content').css({'display':'none'}) 
      .eq(id).css({'display':'block'}); 
    } 
} 
window.setTimeout(rotate, 400); 

//css 
.promo-carousel {display: block;} 
.content {display: none;} 
.content.first {display: block;} 


//markup 
<div class="grid_4"> 
    <div class="promo-carousel"> 
     <div class="content first"> 
      //some content 
     </div> 
    </div> 
    <div class="promo-nav"> 
     <div> 
      <div class="prev"> 
       <a href="#"><span class="hide">previous</span></a> 
      </div> 
      <ul> 
       <li class="active"><a href="#"><span class="">first</span></a></li> 
       <li><a href="#"><span class="">second</span></a></li> 
       <li class="circle"><a href="#"><span class="">third</span></a></li> 
       <li class="circle"><a href="#"><span class="">fourth</span></a></li> 
      </ul> 
      <div class="next"> 
       <a href="#" class=""><span class="hide">next</span></a> 
      </div>    
     </div>    
    </div> 
</div> 

Answer 1

thisのようなものをお探しですか？あなたは既に次のボタンを使用している場合

$(document).ready(function() { 
    $('.promo-nav').show(); 
    setInterval(rotate, 4000); 

    function rotate() { 
     var showid = 0; 
     $('.promo-nav').find('li').each(function() { 

      if ($(this).hasClass('active')) { 
       $(this).removeClass('active'); 
       if ($(this).next().length == 0) { 
        id = $('.promo-nav').find('li:first-child').index(); 
        $('.promo-nav').find('li:first-child').addClass('active'); 
        $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').css({ 
         'display': 'none' 
        }); 
        $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').eq(id).css({ 
         'display': 'block' 
        }); 
        return false; 
       } else { 
        id = $(this).next().index(); 
        $(this).next().addClass('active'); 
        $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').css({ 
         'display': 'none' 
        }); 
        $(this).closest('.promo-nav').prev('.promo-carousel').children('div.content').eq(id).css({ 
         'display': 'block' 
        }); 
        return false; 
       } 
      } 
     }); 
    } 

}); 

Answer 2

、なぜちょうどこれが戻って先頭に自動的にサイクルを次のボタンをしますと仮定し

window.setInterval(function() { 
    $('.promo-nav .next').click(); 
}, 4000); 

は使用しません。