Verticle旋转木马jQuery

Question

我试图创建一个旋转木马，我第一次尝试。 http://jsfiddle.net/PmNM5/

HTML保持UL LI，每个L1具有2个图像两积累的242px宽度和高度= 81px

缺货几个LI中，只有3应该是可见的（即，6个图像将是visble，作为一个LI保持2图像，浮动：每个都留下。）

UL：设置为显示BLOCK，宽度为242px。 HTML显示完美。但旋转木马不起作用，因为我知道我需要聪明地计算出我缺乏的TOP。

<div id="home_carousel"> 
     <ul> 
      <li> 
       <a href="#img1" class="inline cboxElement"><img src="images/home-truck1.jpg"></a> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
      </li> 

      <li> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
      </li> 
      <li> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
      </li> 
      <li> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
       <a href="#"><img src="images/home-truck1.jpg"></a> 
      </li> 

JAVASCRIPT：

var myCarousel = { 

    setHeight: function() { 

     var $img = $('li', '#home_carousel'); 
     var total = 81 * $img.length; 

     $('#home_carousel ul').height(total); 

    }, 

    slide: function() { 
     var outPart = $('#home_carousel ul').outerHeight(); 
     $('#home_carousel_up').on('click', function() { 

      var $a = $(this); 

      $('#home_carousel ul').animate({ 
       top: -81 + outPart + 'px' 
      }, 500, 'easeOutBounce'); 

     }); 

     $('#home_carousel_down').on('click', function() { 

      var $a = $(this); 

      $('#home_carousel ul').animate({ 
       top: 81 + 'px' 
      }, 500, 'easeOutBounce'); 

     }); 

    }, 

    init: function() { 
     this.setHeight(); 
     this.slide(); 
    } 

}; 

myCarousel.init(); 

Answer 1

尝试this

我写的所有逻辑顶偏，停止动画在结束点。

当滚动顶部的条件是：

($('#home_carousel ul').position().top - 81) > (242 - outPart) 

和滚动下来的时候条件是：

$('#home_carousel ul').position().top + 81 <= 0 

我已经harcoded所有值。请将数字81和242（包装高度）存储在变量中。如果你通过jquery.outerHeight方法来计算高度，那将会很好。在这种情况下，如果由于标记或CSS的变化而使高度发生变化，那么代码不会中断。