2013-03-21 186 views
0

我試圖創建一個旋轉木馬,我第一次嘗試。 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(); 
+0

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

+0

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

+0

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

回答

1

嘗試this

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

當滾動頂部的條件是:

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

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

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

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

+0

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