Question

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

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

该div有三个垂直显示在其中的图像......

单击按钮时，我想将这三个图像向左移动，同时从右侧移动另一组三个图像。

你是怎么做到的？我应该为每组三个图像创建一个无序列表，然后使用javascript移动这些UL吗？这似乎使布局变得困难。你会怎么做到这一点？

Answer 1

创建一个无序列表并用列表项填充（每组三个图像一个）。
将列表项串联起来并排列。
让一个具有特定尺寸的div坐在上面，使用overflow：none来掩盖其他列表项。
使用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'
        });
    });

};

Jquery滑动显示器围绕移动垂直堆栈的图像而构建

1 个答案: