简单的jQuery传送带不工作

我有一个简单的jQuery传送带效果，我正在尝试。如果您点击左边的按钮，旋转木马可以很好地工作，但在循环通过右边的四个项目之后就会中断旋转木马。简单的jQuery传送带不工作

演示在http://dance.fuelmultimedia.ca

这里是我的jQuery代码：

$("div.slider_controls .go_right").click(function(e) { 
    e.preventDefault(); 
    if($(".home_slider ul li.current").next().size() != 0) 
    { 
     $(".home_slider ul li.current").animate({ marginLeft: '-=25%'}, 1000).removeClass("current").next().addClass("current"); 
    } 
    else 
    { 
     var $first = $(".home_slider ul li:first"); 
     $('.home_slider ul li:last').after($($first)); 
     $($first).css({'margin-left' : '+25%'}); 
     $(".home_slider ul li.current").removeClass("current").next().animate({ marginLeft: '-=25%'}, 1000).addClass("current"); 
    } 
}); 

$("div.slider_controls .go_left").click(function(e) { 
    e.preventDefault(); 
    if($(".home_slider ul li.current").prev().size() != 0) 
    { 
     $(".home_slider ul li.current").removeClass("current").prev().animate({ marginLeft: '+=25%'}, 1000).addClass("current"); 
    } 
    else 
    { 
     var $last = $(".home_slider ul li:last"); 
     $($last).css({'margin-left' : '-25%'}); 
     $('.home_slider ul li:first').before($($last)); 
     $(".home_slider ul li.current").removeClass("current").prev().animate({ marginLeft: '+=25%'}, 1000).addClass("current"); 
    } 

});

这里是我的HTML代码

<div class="home_slider"> 
     <ul> 
      <li class="current"><img src="<?php bloginfo('template_url'); ?>/img/home_photo1.jpg"></li> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/home_photo2.jpg"></li> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/home_photo3.jpg"></li> 
      <li><img src="<?php bloginfo('template_url'); ?>/img/home_photo4.jpg"></li> 
     </ul> 
    </div> 

<div class="slider_controls"> 
      <a href="#" class="go_left">Previous</a> 
      <a href="#" class="go_right">Next</a> 
     </div>

如果您有任何想法，以什么样的问题可能是我想非常感谢它。

来源

2011-11-02 WebDevDude

您'prev'和'next'按钮的代码块不同 - 当您单击'prev'按钮时，您将删除链中较早的'current'类。由于这是按预期工作，请尝试镜像您的代码 - 采用'prev'代码，并将其改为以相反的方式工作。

来源

2011-11-02 17:58:09 MassivePenguin

这不会影响问题，因为大部分问题都发生在else块中，一旦DOM超出项目循环。 – WebDevDude

我设法找到解决方案。我是这样做的： $（“。home_slider ul li：last”）。css（{'margin-left'：'+ 25％'}）; 。，我需要做到这一点 $（ “home_slider UL li.current”）next（）的CSS（{ '利润率左'： '0'}）; – WebDevDude

简单的jQuery传送带不工作

回答

相关问题