围绕移动垂直堆栈图像构建的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' 
     }); 
    }); 

};