Question

我正在使用一个纯HTML / CSS滑块，根据此JS小提琴（https://codepen.io/dudleystorey/pen/ehKpi）

返回最后一张图像后的空白幻灯片

您可以在此链接（http://eavestroughcleaning.ca/temp.php）上看到图片加载（共3张）并滑入“空白”状态。区域在重新加载/返回第一个区域之前保持5秒钟。没有javascript，你可以直接查看源代码，但是，这里有很好的衡量标准。

CSS：

    @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: 20%; float: left; }
    div#slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 10s slidy infinite; 
    }

HTML：

    <div id="slider">
    <figure>
    <img src="slider-img1.jpg" alt></figure>
    <figure><img src="slider-img2.jpg" alt></figure>
    <figure><img src="slider-img3.jpg" alt></figure>
    </div>

从我的研究看来，这个问题似乎是零星的，可能是浏览器，甚至可能是基于操作系统的（显然）我还没有找到解决方案。我在Fire Mozilla Firefox（49.0.1）上使用Windows 10（全部更新）。我也尝试过Chrome浏览器，但是很快就遇到了同样的问题。建议表示赞赏。

Answer 1

正如@gaby-aka-g-petrioli所提到的，CSS代码适用于5张不是3张的幻灯片。

试试这个：

@keyframes slidy {
0% { left: 0%; }     /* 0 - 30% of animation time */
30% { left: 0%; }    /* 1st slide will be visible */
33% { left: -100%; } /* 30% - 33% slide change will occur */
63% { left: -100%; } /* etc.. */
66% { left: -200%; }
100% { left: -200%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }

div#slider figure img {
  width: 33.333%;    /* image will be 33.333% of total width */
  float: left;
}
div#slider figure { 
  position: relative;
  width: 300%;       /* total width of 3 slides (3*100%) */
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite; /* length of animation */
}

<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
  <figure>
    <img src="austin-fireworks.jpg" alt>
    <img src="taj-mahal_copy.jpg" alt>
    <img src="ibiza.jpg" alt>
  </figure>
</div>

Answer 2

您提供的滑块旨在与5张幻灯片配合使用，这就是为什么滑块具有width: 500%的原因，其中最后一张幻灯片仅在过渡时显示，然后将动画重置为第一张幻灯片，因此，屏幕上会出现“跳跃”或“闪烁”的现象。

如果您想要更多或更少的幻灯片，则应使用滑块width，并将其设置为幻灯片数量乘以100％。而且，您还应该更改动画百分比以设置它们之间的正确过渡。

无限循环解决方案

如果您希望幻灯片像在最后一张和第一张幻灯片之间平滑过渡的无限循环一样滑动，则应复制第一张幻灯片，并将其作为最后一张幻灯片，例如在this example中。

使用此解决方案，当动画完成并且过渡位于最后一张幻灯片上时（实际上是第一张幻灯片的副本），动画中的infinite属性将重置并重新启动它，最后一张重复的幻灯片将替换为原始的第一张幻灯片，而动画上没有任何不良跳动。

解决方案将滑块重置为第一张幻灯片

反之亦然，如果您希望重置滑块并看到滑块回滚到第一张图像，则在动画定义中，应以100％的比例滑动到0％

@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: 0%; }
}

纯CSS滑块返回最后一张幻灯片上的空白图像

2 个答案: