Question

现在我的代码使徽标从右到左动画，一旦它到达结尾，它就会重新启动。如何让它继续循环，以便在新周期开始时第一个徽标跟在最后一个徽标后？

编辑：我宁愿不使用额外的js库，所以如果有一个简单的方法用jquery这样做会更好

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

<强> HTML：

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

<强> CSS：

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

<强> JavaScript的：

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

这就是我使用JQuery Marquee运行它所做的。

外部链接：

jquery.pause.js
jquery.marquee.min.js

您也可以按照Fiddle

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;
}

.mover-1 {
  height: 150px;
  width: 10000px;
  
  position: absolute;
  overflow-x:hidden;
  top: 0;
  left: 0;

  animation: moveSlideshow 3s linear infinite;
}

.mover-1 img {
  display:inline-block;
  vertical-align:middle;
  width:100px;
  margin:0;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-520px);  
  }
}

<div class="tech-slideshow">
  <div class="mover-1">
    <img src="http://static.bragdeal.com/logo.png" style="height:150px;">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png" style="height:150px;">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png" style="height:150px;">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
    <img src="http://static.bragdeal.com/logo.png">
  </div>
</div>

我将.mover-1设置为任意（巨大）宽度，这样您就不必担心徽标会转到下一行。

然后我在你的图像上设置了一些样式，以便它们很好地排列。

最后，我将moveSlideshow translateX距离设置为一组LOGOS的精确宽度。（加上20个像素，因为有一些渲染问题，我太累了，无法弄清楚每个徽标会增加~4px的填充或边距或其他东西）。

关键是，您希望拥有2组徽标 - 初始设置，然后是滚动到视图中的副本。将动画设置为完全移动1组的宽度，它应该平滑循环。

仅仅为了后代（并且因为它非常容易复制和粘贴代码并且不需要额外的带宽来渲染）我实际上添加了第3组徽标，以确保我的徽标块足够宽以至于没有宽屏上的差距。

P.S。我在徽标图像（height:150px）上设置的内嵌样式与功能无关;我只是想确保你能告诉动画何时循环，我懒得找到第二张图片来使用。

P.P.S。而不是a）手动计算徽标的总宽度或b）添加冗余的徽标块，您可以轻松使用jQuery查找.mover-1容器（$('.mover-1')[0].width()）和{{3}的宽度移动那个距离。然后创建一个图像数组（$('.mover-1 img')），然后将它们追加/添加到原始集合中。

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

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

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

2 个答案: