div中的.scrollLeft（）

Question

每次点击“下一个”链接时，我想将.scrollLeft（）转换为.next（）图像。

如果我有文档滚动（jsfiddle），它可以正常工作 但如果我想让div滚动它就变得古怪了。 （jsfiddle）

Answer 1

offset()不包含div已滚动的金额。你需要考虑到这一点。

请参阅the jsfiddle。

我也这样做，以便滚动操作基于数组中的索引而不是进行jQuery方法调用。这使得它（更快）执行（

）

Answer 2

请注意.offset()为relative to the document - 这意味着它取决于div已滚动到的位置！

我不确定要做的最好的事情（DOM位置属性是毛茸茸的，缺少应该简单的东西），但有效的方法是使用.position()代替，并建立偏移父代 in 可滚动元素（即相对定位且包含图像的元素）。

您的代码更改：

 $("#slides").animate({scrollLeft: $($current).position().left}, 500);

    <div id="slides">
        <div class="offset-parent"> <!-- added -->
            <img src="http://www.petwebsite.com/uploadpics/ginger-cat.jpg" class="images" alt="cat">
            ...
        </div>
    </div>

.offset-parent {
    position: relative;
}

jsfiddle

Answer 3

我认为您不需要为此做那么多，我建议您使用 slides 插件或 cycle 插件，根据我的说法，这将是最好的方式。检查插件网站上的示例。

这个 carousel

的另一个好插件