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

Question

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

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

我该怎么做？

非常感谢，戈姆

---

好的，我会尽力澄清。

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

<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();
});

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