Html 如何仅使用 css 创建徽标滑块的无限循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38604929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create marquee infinite loop of logos slider with css only
提问by BragDeal
Right now my code makes the logos animate from right to left and once it hits the end, it restarts. How can I make it continue in a loop so that the first logo follows the last one when a new cycle starts?
现在我的代码使徽标从右到左动画，一旦到达终点，它就会重新启动。如何让它继续循环，以便在新循环开始时第一个徽标跟随最后一个徽标？
EDIT: I rather not use extra js libraries, so if there is a simple way of doing this with jquery that would be much better
编辑：我宁愿不使用额外的 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>回答by Parth Patel
HTML:
HTML：
<div class='marquee'>
....
images
....
</div>
CSS:
CSS：
.marquee {
width: 100%;
overflow: hidden;
border:1px solid #ccc;
}
JavaScript:
JavaScript：
$(function () {
$('.marquee').marquee({
duration: 5000,
duplicated: true,
gap: 00,
direction: 'left',
pauseOnHover: true
});
});
This is what i have done to make it run using JQuery Marquee.
这就是我为使用 JQuery Marquee 运行它所做的工作。
External links:
外部链接：
Also you can follow this Fiddle
你也可以按照这个小提琴
回答by Bmd
I updated your fiddle https://jsfiddle.net/gkpnx34v/2/--- took a little tinkering, but that should give you the idea.
我更新了你的小提琴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>I set your .mover-1to an arbitrary (huge) width just so you wouldn't have to worry about having logos roll over to the next line.
我将您设置.mover-1为任意（巨大）宽度，这样您就不必担心徽标会滚动到下一行。
Then I set some styles on your images so they'd line up nicely.
然后我在你的图像上设置了一些样式，这样它们就可以很好地排列起来。
Finally, I set the moveSlideshow translateX distance to THE EXACT WIDTH OF ONE SET OF LOGOS. (plus 20 pixels because there's some rendering issue that I'm too tired to figure out that's adding ~4px of padding or margin or something to each of the logos).
最后，我将 moveSlideshow translateX 距离设置为一组徽标的精确宽度。（加上 20 像素，因为有一些渲染问题，我太累了，无法弄清楚为每个徽标添加了 ~4px 的填充或边距或其他内容）。
The point is, you want to have 2 sets of logos -- the initial set and then a duplicate that you roll into view. Set your animation to move exactly the width of 1 set and it should loop smoothly.
关键是，您希望拥有 2 组徽标——初始组和您滚动到视图中的副本。将动画设置为精确移动 1 组的宽度，并且应该平滑循环。
Just for posterity (and because it's REALLY easy to copy and paste code and doesn't take any extra bandwidth to render) I actually added a 3rd set of logos just to make sure my block of logos was wide enough to never have a gap on wide screens.
只是为了后代（并且因为它真的很容易复制和粘贴代码并且不需要任何额外的带宽来渲染）我实际上添加了第三组标志只是为了确保我的标志块足够宽，永远不会有间隙宽屏。
P.S. The in-line styles I set on the logo images (height:150px) have nothing to do with the functionality; I just wanted to make sure that you could tell when the animation had looped and I was too lazy to find a second image to use.
PS 我在 logo 图片上设置的内嵌样式 ( height:150px) 与功能无关；我只是想确保你能知道动画何时循环，而我懒得找第二张图片来使用。
P.P.S. Rather than a) manually calculating the total width of the logos or b) adding redundant blocks of logos, you could easily use jQuery to find the width of that .mover-1container ($('.mover-1')[0].width()) and set your keyframeto move that distance. Then make an array of the images ($('.mover-1 img')), then append/prepend them to the original set.
PPS 而不是 a) 手动计算徽标的总宽度或 b) 添加冗余的徽标块，您可以轻松地使用 jQuery 来查找该.mover-1容器的宽度( $('.mover-1')[0].width()) 并设置关键帧以移动该距离。然后制作一组图像 ( $('.mover-1 img'))，然后将它们附加/添加到原始集合中。
This code (untested) should get you close:
这段代码（未经测试）应该让你接近：
var logos = $('mover-1 img');
$('.mover-1').append(logos).append(logos);
