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

Question

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

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

我该怎么办？

非常感谢，Gorm

---

好吧，我会尽力澄清。

假设我有一个水平行的图像（高度固定但宽度未知 - 尽管比周围的容器小），带有“下一个”和“上一个”按钮，

<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

好吧，

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

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

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

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

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