Jquery滑动显示构建在移动垂直图像堆栈的基础上

如何在垂直对齐的空间中水平滚动一堆图像？想象一下这样的布局：

我有一个可视区域，比如一个div，具有固定的大小（50px宽300px高），溢出设置为none以隐藏它之外的任何东西

该div中垂直显示了三个图像

点击一个按钮，我想将这三幅图像移到左边，同时从右边移到另一组三幅图像

你是怎么做到的？我是否应该为每组三幅图像创建一个无序列表，然后使用javascript移动这些UL？这似乎使布局变得困难。你将如何处理这个问题

创建一个无序列表，并用列表项填充它（每组三个图像一个）

将列表项以内联方式排列在一起

让一个具有特定维度的div坐在这个上面并溢出：CSS中没有可以屏蔽其他列表项的div

使用Javascript将可见设置移到一边，同时将下一个设置带入视图

使用jquery，您可以使用

last

和

first

选择器：li:first进行切换。使用列表项的宽度移动它们 这是一个换档功能：

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'
        });
    });

};