Question

看到这个小提琴：http://jsfiddle.net/r0mvyLmx/

我必须从头开始编写一个简单的jQuery水平轮播，但我偶然发现了以下问题：当按下下一个按钮时，当前元素滑出视图就好了，但下一个元素没有滑动只有在前一个元素完全不在视图之后才显示。如果你不理解我，那就是我之后的效果：http://jsfiddle.net/yvD5S/（下一张和之前的幻灯片同时滑动）。

这是我的代码：

    $('#carousel-outer button:last').on('click', function () {
        var slide = $('#carousel-inner .item.active');

        slide.animate({'margin-left':'-480px'},2000,function() {
            slide.css({ 'margin-left': 0 });
            slide.parent().find('div:last').after(slide);
            slide.removeClass('active');
            slide.parent().find('div:first').addClass('active');
        });
    });

Answer 1

哎呀，这个问题很简单。它不是jQuery，而是CSS，这是错误的。在旋转木马的内包装上，我给它的外包装宽度相同，并且滑块没有显示内联，而是阻挡，因此它们无法相互流动。我已经为那些对此问题感兴趣的人更新了小提琴：http://jsfiddle.net/r0mvyLmx/1/。 JS中也有一个小的变化，为了使非活动元素保持display：none。

CSS：

#carousel-outer {
    width: 480px;
    margin: 0 auto;
    overflow: hidden;    
}

#carousel-inner {
    width: 1600px;
    height: 200px;
    overflow: hidden;
}

jQuery更改：

$('#carousel-outer button:last').on('click', function () {
    var slide = $('#carousel-inner .item.active');

    slide.next().addClass('active');
    slide.animate({'margin-left':'-480px'},2000,function() {
        slide.css({ 'margin-left': 0 });
        slide.parent().find('div:last').after(slide);
        slide.removeClass('active');
});

jQuery轮播下一个元素没有滑入

1 个答案: