탭을 자동으로 돌리시겠습니까?

Question

JS에 능숙하지 않아서 내가 가지고있는 문제를 도와주고 싶습니다. 드루팔 (Drupal) 웹 사이트의 탭을 자동으로 회전시키고 싶지만 여전히 사용자가 클릭 할 수 있도록하고 싶습니다.

 <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
     <script type="text/javascript">   
     $('ul.checklist-select li').click(function() { 
     var selectID = $(this).attr('id'); 
     $('ul.checklist-select li').removeClass('active'); 
     $(this).addClass('active'); 
     $('.first-box, .second-box, .third-box, .fourth-box').fadeOut(300); 
     $('.' + selectID + '-box').delay(300).fadeIn(300);}); 
     </script> 

내가 몇 가지 옵션을 시도했지만이 working.Thanks 많이하지 않았다 : 이것은 내가 가지고있는 코드입니다! 시간과 도움에 감사드립니다.

Answer 1

글쎄,보기를 업데이트하고 다음 것으로 회전하는 간격을 추가하려고합니다 (또는 마지막 인 경우 첫 번째 간격).

은 (테스트하지)이 시도 : 추가 할 수 있습니다

<script type="text/javascript"> 
var index = 0, // Index of current tab 
    interval = setInterval(function() { rotate(); }, 5000), // Interval 
    $tabs = $('ul.checklist-select'), 
    $content = $('.checklist_wrap'); 

// Click handler 
$('ul.checklist-select li').each(function (i) { 
    $(this).click(function() { 
     index = i; 
     switchElement(); 
    }); 
}); 

function rotate() { 
    // Update index to next one 
    index++; 

    // Check if this is a valid index, or reset to 0 
    if (index >= $tabs.children('li').length) 
     index = 0; 

    switchElement(); 
} 

function switchElement() { 
    clearInterval(interval); 

    // Remove class from current tab 
    $('ul.checklist-select li').removeClass('active'); 
    $('.checklist_wrap .box').fadeOut(300); 

    // Show 
    $tabs.children('li').eq(index).addClass('active'); 
    $content.children('.box').eq(index).delay(300).fadeIn(300); 

    // Reset interval 
    interval = setInterval(function() { rotate(); }, 5000); 
} 
</script> 

뭔가 간격이 누군가가 탭을 클릭하면 다시 것입니다.