Question

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

我的问题是，最后一张图片与第一张图片之间存在差距。我相信解决这个问题的理论是使用jQuery计算第一个<span>中所有图像的总和，从容器的宽度减去该值，然后添加负margin-left用那个差别号码。我尝试了下面的代码，但问题是我对jQuery不够熟悉以拉动宽度。另外，我需要一个解决方案来计算窗口大小调整时的新容器宽度（因为容器设置为100％并且肯定会更改）。

注意：两个跨度包含相同的图像。这样做的原因是第一个跨度在第一个跨度到达最左侧时立即滚动到视图中。这无限循环。

<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>

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

在每个弹性框内，图像在自己的容器内重新缩放，适合整个屏幕宽度，同时保持其比例：

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

编辑：添加了一个外部包装器来移除滚动条，并添加了一个flex-grow来生成img（如果有空闲空间）。

Answer 2

我使用jquery创建了一个滑块，它与您的查询略有不同。但我希望它可以满足您的要求。

网址：http://demos4clients.com/mygallery/

您需要将jquery库文件和图像包含在滑块中。您还可以在jquery代码中更改持续时间。

CSS Marquee Slider补偿外宽减去内宽

2 个答案: