Question

使用仅限CSS的滑块，并且在动态添加图像方面遇到了麻烦。我能够解决我的大多数问题，但在一些幻灯片放映（似乎是随机的）上，图像不按顺序播放，有些则被跳过。

我已经包含了一个复制了我的确切问题的CodePen： http://codepen.io/anon/pen/PPmEda

我允许最多15张图片。图像滚动后，订单搞砸了。有时我会在每次其他过渡时获得相同的图像，但其他人似乎完全随机。

有谁知道问题可能是什么？

HTML：

<div class="container">
    <img class="photo" src="https://unsplash.com/photos/7gZEY7tY9C4/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/ZMcLVBi9xx4/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/lZlfHGqx44Q/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/bviex5lwf3s/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/6LkxufmApSk/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/xFjAftU8lMY/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/qsEJGX4VqYU/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/dJVU4jXV1Q8/download" alt="">
    <img class="photo" src="https://unsplash.com/photos/3ytjETpQMNY/download" alt="">
</div>

CSS：

.photo{
    position:absolute;
    animation:round 16s infinite;
    opacity:0;
}
@keyframes round{   
    25%{opacity:1;}
    40%{opacity:0;}
} 

img:nth-child(15){animation-delay:56s;}
img:nth-child(14){animation-delay:52s;}
img:nth-child(13){animation-delay:48s;}
img:nth-child(12){animation-delay:44s;}
img:nth-child(11){animation-delay:40s;}
img:nth-child(10){animation-delay:36s;}
img:nth-child(9){animation-delay:32s;}
img:nth-child(8){animation-delay:28s;}
img:nth-child(7){animation-delay:24s;}
img:nth-child(6){animation-delay:20s;}
img:nth-child(5){animation-delay:16s;}
img:nth-child(4){animation-delay:12s;}
img:nth-child(3){animation-delay:8s;}
img:nth-child(2){animation-delay:4s;}
img:nth-child(1){animation-delay:0s;}

CSS Slider跳过图像而不能正常工作

0 个答案: