如何仅使用 css 创建徽标滑块的无限循环

Question

现在我的代码使徽标从右到左动画化，一旦结束，它就会重新启动。我怎样才能让它继续循环，以便在新循环开始时第一个徽标跟随最后一个徽标？

编辑：我宁愿不使用额外的 js 库，所以如果有一种使用 jquery 执行此操作的简单方法会更好

 img {
  width: 100px;
}
.marquee {
  position: relative;
  width: 100%;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}
.marquee div {
  display: block;
  position: absolute;
  width: 300%;
  overflow: hidden;
  animation: marquee 20s linear infinite;
}
.marquee div:hover {
  animation-play-state: paused;
}
.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

 <div class="marquee">
  <div>
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
    <img src="http://static.bragdeal.com/logo.png" alt="">
  </div>
</div>

原文由 BragDeal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML:

   <div class='marquee'>
       ....
       images
       ....
    </div>

CSS：

 .marquee {
    width: 100%;
    overflow: hidden;
    border:1px solid #ccc;
}

脚本：

 $(function () {
    $('.marquee').marquee({
        duration: 5000,
         duplicated: true,
         gap: 00,
         direction: 'left',
         pauseOnHover: true
    });
});

这就是我使用 JQuery Marquee 使其运行所做的工作。

外部链接：

1. jquery.pause.js
2. jquery.marquee.min.js

你也可以关注这个 小提琴

原文由 Parth Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我更新了你的小提琴 https://jsfiddle.net/gkpnx34v/2/ --- 进行了一些修改，但这应该会给你想法。

 .tech-slideshow {
  height: 100px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border:1px solid black;
  font-size:0; /* THIS IS A HACK TO REMOVE THE "WHITESPACE" BETWEEN IMAGES.
                  YOU COULD ALSO PUT ALL OF THE IMAGES ON THE SAME LINE
                  (eg: <img src=""><img src=""><img src="">
                  with no spaces or line-breaks),
                  BUT THAT MAKES THE CODE LESS READABLE SO I'M DOING THIS
                  FOR THE SAKE OF CREATING THIS EXAMPLE FOR YOU */
}

.mover-1 {
  height: 150px;
  width: max-content;

  position: absolute;
  overflow-x:hidden;
  top: 0;
  left: 0;

  animation: moveSlideshow 5s linear infinite;
}

.mover-1 img {
  display:inline-block;
  vertical-align:middle;
  width:100px;
  margin:0;
}

@keyframes moveSlideshow {
  100% {
    transform: translateX(-500px);
  }
}

 <div class="tech-slideshow">
  <div class="mover-1">
    <img src="https://placekitten.com/100/150">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">

    <img src="https://placekitten.com/100/150">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">

    <img src="https://placekitten.com/100/150">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
    <img src="https://placekitten.com/100/100">
  </div>
</div>

将您的 .mover-1 容器的宽度设置为 max-content （以自动调整大小至任何必要的宽度）。您也可以将其设置为任意（巨大）宽度，这样您就不必担心徽标会滚动到下一行。

然后在您的图像上设置一些样式，使它们排列得很好。

最后，将 moveSlideshow translateX 距离设置为一组徽标的精确宽度。

关键是，您想要拥有 2 套徽标——初始的一套，然后是您滚动到视图中的副本。将您的动画设置为精确移动 1 组的宽度，并且它应该平滑循环。

只是为了后代（而且因为它真的很容易复制和粘贴代码并且不需要任何额外的带宽来呈现）我实际上添加了第三组徽标只是为了确保我的徽标块足够宽以至于永远不会有间隙宽屏幕。

PS 我在小猫图像上设置的高度差异（其中一些是 150 像素高而不是 100 像素）与功能无关；我只是想确保您可以判断动画何时循环。

PPS 而不是 a) 手动计算徽标的总宽度或 b) 添加多余的徽标块，您可以轻松地使用 jQuery 来查找容器的宽度 .mover-1 容器（ $('.mover-1')[0].width() ）并 设置关键帧 以移动该距离。然后制作图像数组（ $('.mover-1 img') ），然后将它们附加/添加到原始集合中。

此代码（未经测试）应该让你关闭：

 var logos = $('mover-1 img');
$('.mover-1').append(logos).append(logos);

原文由 Bmd 发布，翻译遵循 CC BY-SA 4.0 许可协议