我创建简单的滑块为我的网站，在这里工作的罚款演示 http://jsfiddle.net/Kxnh3/1/需要jQuery的自动功能

现在我要努力滑块汽车？有什么想法？

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>

来源

2012-05-16 ShibinRagh

你能对你的意思是 “自动” 详细说明了什么？ – patrickn

有两个幻灯片'左'和'右'。哪些需要做自动？ –

我的意思是需要没有点击的工作？ – ShibinRagh

demo 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);

来源

2012-05-16 14:04:57

伟大的工作，但你改变了我所有的jquery脚本不是一个问题）我不是一个jQuery专家，所以我不知道它如何处理你的代码，所以即时通讯问你可以用我自己的代码吗？ – ShibinRagh

@ShibinRagh感谢您的及时评论。你的代码不适合你的需求。在我向你解释之后，这段代码实际上非常简单。如果你想我可以带你穿过它。 –

是的，告诉我，我给你分数 – ShibinRagh

查找到setInterval功能，您可以通过每隔几秒钟的幻灯片使用这个循环。

来源

2012-05-16 13:35:33

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); 

});

Demo

来源

2012-05-16 13:36:07

太棒了，但有一点麻烦，不能正常工作 – ShibinRagh

发生了什么 –

错过了活动类 – ShibinRagh

需要jQuery的自动功能

回答

demo jsBin

相关问题