Question

旋转木马在转换时会稍微移动/跳跃，我不确定是什么错。

$(".timer").css("display");
$(".timer:gt(5)").css("display", "none");
function move_first() {
    //console.debug("animate");
    $(".timer").eq(0).stop().animate({
        opacity: 0.00,
        width: "toggle"
    }, 500, function() {
        $(this).insertAfter($(".timer").eq(-1));
        $(this).css('opacity', '1');
        $(".timer").eq(5).animate({
            opacity: 1.00,
            width: "toggle"
        }, 500, function() {
            $(".timer").css("display");
            $(".timer:gt(5)").css("display", "none");
        });
    });

    setTimeout(move_first, 3000);
}

move_first();

这里是jsfiddle的链接：Jumpy Carousel

有什么想法吗？

Answer 1

ul元素之间存在间距。这是由HTML中的任何空格引起的。例如，您可以通过消除HTML中的所有换行符来消除它。由于这显然是不可能的，因此最好通过使其大小为零来简单地消除间距。由于间距在技术上是由字体引起的，我们可以使用font-size: 0;。您可以通过在CSS中添加以下内容来完成此操作：

#carousel-images ul {
    font-size:0;
}

当然，最好为您的ul提供一个ID并在CSS中引用该选择器。如果你仍然想要元素之间的间距，你可以使用边距和填充来实现这一点。

#carousel-images ul li {
    margin-right:10px;
}

编辑：我看到问题已经回答了。真棒！我还添加了一个示例解决方案来保留一些空白区域。

Answer 2

元素之间的空白区域也会计算，并提供错误的宽度计算。你可以通过添加：

来纠正它

ul { font-size: 0; }

小提琴：http://jsfiddle.net/uqt8kbxm/2/

参考：Fighting the Space Between Inline Block Elements

JQuery旋转木马很疯狂

2 个答案: