Question

我正在使用jQuery创建一个库，它可以水平显示图片，下面有一个“左”和“右”按钮，用于滚动图像行。有很多教程和插件。

对我来说问题是，1）我不知道图像的宽度。 2）我需要滚动的项目，以便居中。

我该怎么做？

非常感谢，Gorm

好的，我会尽力澄清。

假设我有一排水平的图像（固定高度但未知宽度 - 虽然小于周围的容器），并带有'next'和'prev'按钮

<div class="imgContainer">
  <ul>
    <li><img src="01.jpg" alt=""></li>
    <li><img src="02.jpg" alt=""></li>
    <li><img src="03.jpg" alt=""></li>
    <li><img src="04.jpg" alt=""></li>
    ...
  </ul>
</div>
<a href="#" id="prev">Previous image</a>
<a href="#" id="next">Next image</a>

页面加载时，第一张图像显示在中央，下一张图像显示在右侧。

单击“下一张图像”时，图像行将滚动到下一张图像的中心位置。

我尝试了不同的“解决方案”，但我认为我是一个js / jquery新手。所以任何帮助将不胜感激。： - ）

Answer 1

那么，

计算图像的宽度
将您正在滚动的项目居中

说真的，你需要提供更多信息才能获得有意义的答案。

您可以像这样计算集合中图像的宽度：

var totalWidth = 0;
$('.container img').each(function() {
    totalWidth += $(this).outerWidth();
});

否则它只是简单的算术。如果这没有帮助，请提供有关您所面临问题的更多详细信息。

jQuery具有未知宽度项目的水平滚动

1 个答案: