javascript - CSS Marquee Slider 补偿外宽减去内宽

Question

所以我有一个选取框 slider ，它可以拍摄一堆图像，将它们滚动到左侧，当第一张图像到达页面左侧时，它会再次从右侧无限返回。

我的问题是最后一张图片和再次出现的第一张图片之间存在差距。我相信解决这个问题的理论是使用 jQuery 计算第一个 <span> 中所有图像的总和。 ，从容器的宽度中减去它，然后添加负数 margin-left与那个差分号。我试过下面的代码，但问题是我对 jQuery 不够熟悉，无法拉宽。此外，我需要一个解决方案来计算窗口调整大小时的新容器宽度(因为容器设置为 100% 并且肯定会改变)。

注意:两个跨度包含相同的精确图像。这样做的原因是第二个跨度在第一个跨度到达最左边时立即滚动到 View 中。这会无限循环。

<script>

var marqueeWidth = $('.marquee div span').innerWidth();

var marqueeWidth2 = 0;
$('.marquee div span img').each(function(){
    marqueeWidth2  += $(this).innerWidth();
});

console.log(marqueeWidth / 2);
console.log(marqueeWidth2);

</script>

Full Code on JSFiddle: http://jsfiddle.net/Hybridx24/5nuxfed5/2/

Answer 1

这对你有用吗？ http://jsfiddle.net/5nuxfed5/11/

我对 html 进行了一些更改，2 个 span 现在是 div.flex_container，它们是宽度为 100% 的 inline-flex 元素。

.flex_container {
  display: inline-flex;
  width: 100%;
}

我还使用 white-space: nowrap

防止图像换行到下一行

.marquee {
  white-space: nowrap;
  position: relative;
  font-size: 0;  /* Inline-block spacing issue hack */
  animation: marquee 5s infinite linear;
}

在每个 flex box 中，图像在其自己的容器内重新缩放，以适应整个屏幕宽度，同时保持其比例:

.marquee img {
  display: block;
  width: 100%;
  height: auto;
}

编辑:添加了一个外部包装器以移除滚动条，并添加了一个 flex-grow 以在有可用空间时增大 img。