jquery - jQueryの自動機能が必要

Question

私は自分のサイト用にシンプルなスライダーを作成しました。ここでうまく動作しています http://jsfiddle.net/Kxnh3/1/

今、私はこのスライダーを自動で動かしたいですか？何か案が ？

jQuery(document).ready(function() {
     jQuery('.sliderBtn li:eq(0) a').click(function()
     {
     jQuery('.sliderBtn li:eq(0)').addClass('activeSlide');
     jQuery('.sliderBtn li:eq(1)').removeClass('activeSlide');
     jQuery('#homeSliderSlideshow').animate({'left':'0'},'slow');
     });

     jQuery('.sliderBtn li:eq(1) a').click(function()
     {
     jQuery('.sliderBtn li:eq(0)').removeClass('activeSlide');
     jQuery('.sliderBtn li:eq(1)').addClass('activeSlide');
     jQuery('#homeSliderSlideshow').animate({'left':'-100px'},'slow');
     });

});

HTML:

<div class="wraper">
    <ul id="homeSliderSlideshow">
        <li>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </li>
    </ul>
</div>

<div class="sliderBtn">
    <ul>
        <li class="activeSlide">
            <a href="#">1</a>
         </li>
        <li>
            <a href="#">2</a>
         </li>
    </ul>
</div>

Answer 1

jQuery(document).ready(function() { 

    var value=0;
    setInterval(function(){
        value=value==0?-100:0;


        if(value==0)
        {
           jQuery('.sliderBtn li:eq(0)').addClass('activeSlide');
           jQuery('.sliderBtn li:eq(1)').removeClass('activeSlide');
        }else if(value==-100){
           jQuery('.sliderBtn li:eq(1)').removeClass('activeSlide');
           jQuery('.sliderBtn li:eq(0)').addClass('activeSlide');
        }


        jQuery('#homeSliderSlideshow').animate({'left': value + 'px'},'slow');
    },2000);

});

デモ

Answer 2

デモ jsBin

(function($){  // remap '$' to jQuery

  $(document).ready(function(){
    
    var c = 0;
    var t;
    var n = $('#homeSliderSlideshow li div').length/2;
    
    function actives(){
      $('.sliderBtn li:eq('+c+')').addClass('activeSlide');
      $('.sliderBtn li:eq('+c+')').siblings('li').removeClass('activeSlide');
    } 
  
    function anim(){
        $('#homeSliderSlideshow').animate({left : -(c*104)},800);        
    }
                 
    function autoAnim(){
            t = setTimeout(function(){
                c=++c%n;
                actives();
                anim();
                autoAnim();
            },2000);
    }
    autoAnim();
               
    $('.sliderBtn li').click(function(e){
        e.stopPropagation();
        clearTimeout(t);
        c = $(this).index();
        actives();
        anim();
        return false;
    });
  
});

 })(jQuery);

Answer 3

setInterval関数を調べてください。これを使用して、数秒ごとにスライドを切り替えることができます。