Verticle旋轉木馬jQuery

我試圖創建一個旋轉木馬，我第一次嘗試。 http://jsfiddle.net/PmNM5/Verticle旋轉木馬jQuery

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

來源

2013-03-21 STEEL

「easeOutBounce」未在基本JQuery庫中定義。你還包括JQuery UI效果庫嗎？ – 2013-03-21 05:13:15

我試過這個工作，但我的問題是旋轉木馬不起作用後第二次點擊。由於即時通訊使用TOP的靜態值動畫。我需要一個關於如何每次獲得動態TOP的UL幫助！ – STEEL 2013-03-21 05:25:21

這樣的事情。 http://jsfiddle.net/PmNM5/10/ – user991554 2013-03-21 05:52:54

嘗試this

我寫的所有邏輯頂偏，停止動畫在結束點。

當滾動頂部的條件是：

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

和滾動下來的時候條件是：

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

我已經harcoded所有值。請將數字81和242（包裝高度）存儲在變量中。如果你通過jquery.outerHeight方法來計算高度，那將會很好。在這種情況下，如果由於標記或CSS的變化而使高度發生變化，那麼代碼不會中斷。

來源

2013-03-21 05:48:34

謝謝，我被困在邏輯。有用。現在我試着如果它的最後，然後點擊TOP應該倒帶。 – STEEL 2013-03-21 06:32:07

Verticle旋轉木馬jQuery

回答

相關問題