图滑块“堆栈”答案

【问题标题】：Figure Slider "Stacks"图滑块“堆栈”
【发布时间】：2017-03-28 05:02:17
【问题描述】：

我正在尝试制作一个响应式 CSS 图像滑块，当我在 <figure> 块中放置超过 5 张图像时遇到了问题。例如，当我有 8 张图像要放入帧块中时，第 6、第 7 和第 8 张图像实际上会低于第 1、第 2、第 3、第 4 和第 5 张图像（非常奇怪的问题） .这是我在说什么的更好的表示：

我是 Dirty Bomb 游戏的粉丝，我正在尝试为它创建一个粉丝网站。我希望所有 HD Dirty Bomb 背景成为我的滑块的一部分，但遇到了很多麻烦。下面是它的样子：

http://imgur.com/a/Gt3WD

这是滑块的代码（它可以工作，但第 6、第 7 和第 8 张图片总是在底部！）：

HTML

<div class="slider">
    <figure>
        <img src="../img/bg/naderbg.png" alt>
        <img src="../img/bg/proxybg.png" alt>
        <img src="../img/bg/fletcherbg.png" alt>
        <img src="../img/bg/bushwackerbg.png" alt>
        <img src="../img/bg/sparksbg.png" alt>
        <img src="../img/bg/kirabg.png" alt>
        <img src="../img/bg/rhinobg.png" alt>
        <img src="../img/bg/artybg.png" alt>
    </figure>
</div>

CSS

.slider{
    overflow: hidden;
}

.slider figure{
    position:absolute;
    width:500%;
    margin:0;
    left:0;
    animation: 100s slidy infinite;
}

.slider figure img{
    width:20%;
    float:left;
}

@keyframes slidy{
    0%{left:0%;}
    10%{left:0%;}
    12%{left:-100%;}
    22%{left:-100%;}
    24%{left:-200%;}
    34%{left:-200%;}
    36%{left:-300%;}
    46%{left:-300%;}
    48%{left:-400%;}
    58%{left:-400%;}
    60%{left:-300%;}
    70%{left:-300%;}
    72%{left:-200%;}
    82%{left:-200%;}
    84%{left:-100%;}
    94%{left:-100%;}
    96%{left:0%;}
}

此外，Dudley Storey 在本网站上的代码也会发生同样的情况。

如果您添加超过 5 张图片（例如您在他的代码中添加相同的图片），第 6、第 7、第 8 等将低于第 1、第 2、第 3 等

https://codepen.io/dudleystorey/pen/ehKpi

我已经为这个问题苦苦挣扎了一整天。我一直在 YouTube、Internet、Stack Overflow 上查看大量视频，但找不到解决方案。

【问题讨论】：

标签： html css stack figure

【解决方案1】：

您应该将.slider figure 的宽度设置为100% * images count（8 张图片为 800%）并将.slider figure img 设置为100% / images count（8 张图片为 12.5%）：

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img {
  width: 12.5%; 
  float: left; 
}
div#slider figure { 
  position: relative;
  width: 800%; 
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

【讨论】：