圍繞移動垂直堆棧圖像構建的Jquery滑動顯示

Question

如何通過垂直對齊的空間水平滾動一堆圖像？試想一下，這樣的佈局：

我有一個可視區域，說一個div，有一個固定大小（50像素寬x 300像素高）和溢出設置爲none以隱藏它以外的任何東西......

那div有三個圖像堆疊垂直顯示在裏面...

點擊一個按鈕我想將這三個圖像向左移動，而從右側移動另一組三個圖像。

你是如何做到這一點的？我應該爲每組三個圖像創建一個無序列表，然後使用javascript移動這些UL？這似乎使佈局困難。你會如何處理這個問題？

Answer 1

1. 創建一個無序列表，並用列表項目（每個三個圖像集合一個）填充它。
2. 內聯列表項並列排列。
3. 有一個具有特定尺寸的div用這個溢出處理：CSS中沒有用來掩蓋其他列表項。
4. 使用Javascript將可見集轉移到一側，同時將下一個轉到視圖中。
5. 使用jQuery，你可以使用last和first選擇器：li：首先。使用列表項目的寬度來移動它們。

這裏是一個移位功能：

var Shift = function(direction){ 
    var dir = direction; 
    var item_width = $('#carousel_ul li').outerWidth(); 
    var indent = parseInt($('#carousel_ul').css('left'), 10); 
    var left_indent; 

    if(dir === 'after'){ 
     left_indent = indent - item_width; 
    } else if (dir === 'before'){ 
     left_indent = indent + item_width; 
    }else{ 
     return; // first list item will display but nothing moves 
    } 

    //make the sliding effect using jquery's animate function 
    //prevent already animated elements from responding 
    $('#carousel_ul:not(:animated)').animate({ 
     'left' : left_indent 
    },500,function(){ 

     if(dir === 'after'){ 
      $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
     } else if (dir === 'before'){ 
      $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
     } else { 
      return; // first list item will display but nothing moves 
     } 

     $('#carousel_ul').css({ 
      'left' : '-120px' 
     }); 
    }); 

};