CSS3 Slider包含超过6张图片

Kjellson 发表于 Dev

凯尔森

我在食堂中使用了漂亮的CSS3滑块进行幻灯片演示。滑块很棒，但是存在错误，开发人员似乎不再活跃。

如果您在幻灯片中添加了6个以上的项目，则该项目会重叠，并且我找不到问题。有人有什么想法吗？

<body id="page">
  <ul class="cb-slideshow">
    <ul>
      <!-- Background Images muessen via CSS gesetzt werden! -->    
      <li><span>Image 01</span><div class="slide">{{SP7}}</div></li>
      <li><span>Image 02</span><div class="slide">{{SP2}}</div></li>
      <li><span>Image 08</span><div class="slide">{{SP10}}</div></li>   
      <li><span>Image 04</span><div class="slide">{{SP4}}</div></li>
      <li><span>Image 05</span><div class="slide">{{SP8}}</div></li>
      <li><span>Image 06</span><div class="slide">{{SP6}}</div></li>
    </ul>
  </ul>
</body>

我将CSS降至最低。来源是从这里开始。

例如，如果我尝试使用9个元素，则尝试这些计时，但它会重叠：

.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 180s linear infinite 0s;
    -moz-animation: imageAnimation 180s linear infinite 0s;
    -o-animation: imageAnimation 180s linear infinite 0s;
    -ms-animation: imageAnimation 180s linear infinite 0s;
    animation: imageAnimation 180s linear infinite 0s;
}

.cb-slideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 40px;
    right:5px;
    width: 90%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 180s linear infinite 0s;
    -moz-animation: titleAnimation 180s linear infinite 0s;
    -o-animation: titleAnimation 180s linear infinite 0s;
    -ms-animation: titleAnimation 180s linear infinite 0s;
    animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 60px;
    padding: 10px 10px;
    margin: 20px;
    line-height: 60px;
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .slide {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 60px;
    padding: 10px 10px;
    margin: 20px;
    line-height: 60px;
    color: #ffffff;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .slide  h1 {    
    right:5px;
    margin:25px;
    font-size:80px;
    color: #E2001A;
    font-family: 'Bree Serif', serif;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}

    .slide  h2 {    
    right:5px;
    margin:25px;
    font-size:80px;
    color: #FFFFFF;
    font-family: 'Bree Serif', serif;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
    .cb-slideshow li:nth-child(1) span { background-image: url(assets/images/background/em.jpg) }
.cb-slideshow li:nth-child(2) span {
    background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(assets/images/background/xmas.jpg);
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
     background-image: url(assets/images/background/nextgen.jpg);
    -webkit-animation-delay: 80s;
    -moz-animation-delay: 80s;
    -o-animation-delay: 80s;
    -ms-animation-delay: 80s;
    animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(assets/images/background/borussia.jpg);
    -webkit-animation-delay: 100s;
    -moz-animation-delay: 100s;
    -o-animation-delay: 100s;
    -ms-animation-delay: 100s;
    animation-delay: 100s;
}

.cb-slideshow li:nth-child(7) span {
    background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
    -webkit-animation-delay: 120s;
    -moz-animation-delay: 120s;
    -o-animation-delay: 120s;
    -ms-animation-delay: 120s;
    animation-delay: 120s;
}

.cb-slideshow li:nth-child(8) span {
    background-image: url(assets/images/background/f1.jpg);
    -webkit-animation-delay: 140s;
    -moz-animation-delay: 140s;
    -o-animation-delay: 140s;
    -ms-animation-delay: 140s;
    animation-delay: 140s;
}

.cb-slideshow li:nth-child(9) span {
    background-image: url(assets/images/background/superbowl.jpg);
    -webkit-animation-delay: 160s;
    -moz-animation-delay: 160s;
    -o-animation-delay: 160s;
    -ms-animation-delay: 160s;
    animation-delay: 160s;
}

.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -o-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    -ms-animation-delay: 40s;
    animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
    -webkit-animation-delay: 80s;
    -moz-animation-delay: 80s;
    -o-animation-delay: 80s;
    -ms-animation-delay: 80s;
    animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
    -webkit-animation-delay: 100s;
    -moz-animation-delay: 100s;
    -o-animation-delay: 100s;
    -ms-animation-delay: 100s;
    animation-delay: 100s;
}

.cb-slideshow li:nth-child(7) div {
    -webkit-animation-delay: 120s;
    -moz-animation-delay: 120s;
    -o-animation-delay: 120s;
    -ms-animation-delay: 120s;
    animation-delay: 120s;
}

.cb-slideshow li:nth-child(8) div {
    -webkit-animation-delay: 140s;
    -moz-animation-delay: 140s;
    -o-animation-delay: 140s;
    -ms-animation-delay: 140s;
    animation-delay: 140s;
}

.cb-slideshow li:nth-child(9) div {
    -webkit-animation-delay: 160s;
    -moz-animation-delay: 160s;
    -o-animation-delay: 160s;
    -ms-animation-delay: 160s;
    animation-delay: 160s;
}

哈里

您在问题中提供的链接中已经存在您问题的答案，但是如果您在理解该问题时遇到困难，我将尝试以不同的方式进行解释。

仅仅改变animation-duration，animation-delay不足以使该动画具有更多的否。的元素。您还必须keyframe像下面提供的代码片段一样修改动画设置。

@keyframes imageAnimation {
  0% {opacity: 0; animation-timing-function: ease-in;}
  5% {opacity: 1; transform: scale(1.05); animation-timing-function: ease-out;}
  11% {opacity: 1; transform: scale(1.1) rotate(3deg);}
  16% {opacity: 0; transform: scale(1.1) rotate(3deg);}
  100% {opacity: 0;}
}
@keyframes titleAnimation {
  0% {opacity: 0; transform: translateX(200px);}
  5% {opacity: 1; transform: translateX(0px);}
  11% {opacity: 1; transform: translateX(0px);}
  13% {opacity: 0; transform: translateX(-400px);}
  25% {opacity: 0;}
  100% {opacity: 0;}
}

.cb-slideshow,
.cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
.cb-slideshow:after {
  content: '';
  background: transparent url(assets/images/background/pattern.png) repeat top left;
}
.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  backface-visibility: hidden;
  animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 40px;
  right: 5px;
  width: 90%;
  text-align: center;
  opacity: 0;
  animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px 10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 60px;
  padding: 10px 10px;
  margin: 20px;
  line-height: 60px;
  color: #ffffff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #E2001A;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
  right: 5px;
  margin: 25px;
  font-size: 80px;
  color: #FFFFFF;
  font-family: 'Bree Serif', serif;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span {
  background-image: url(assets/images/background/em.jpg)
}
.cb-slideshow li:nth-child(2) span {
  background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
  animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
  background-image: url(assets/images/background/xmas.jpg);
  animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
  background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
  animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
  background-image: url(assets/images/background/nextgen.jpg);
  animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
  background-image: url(assets/images/background/borussia.jpg);
  animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
  background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
  animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
  background-image: url(assets/images/background/f1.jpg);
  animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
  background-image: url(assets/images/background/superbowl.jpg);
  animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
  animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
  animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
  animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
  animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
  animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
  animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
  animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
  animation-delay: 160s;
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  5% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  11% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
  }
  16% {
    opacity: 0;
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    opacity: 0
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px);
  }
  11% {
    opacity: 1;
    transform: translateX(0px);
  }
  13% {
    opacity: 0;
    transform: translateX(-400px);
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul class="cb-slideshow">
  <ul>
    <li><span>Image 01</span>
      <div class="slide">{{SP1}}</div>
    </li>
    <li><span>Image 02</span>
      <div class="slide">{{SP2}}</div>
    </li>
    <li><span>Image 03</span>
      <div class="slide">{{SP3}}</div>
    </li>
    <li><span>Image 04</span>
      <div class="slide">{{SP4}}</div>
    </li>
    <li><span>Image 05</span>
      <div class="slide">{{SP5}}</div>
    </li>
    <li><span>Image 06</span>
      <div class="slide">{{SP6}}</div>
    </li>
    <li><span>Image 07</span>
      <div class="slide">{{SP7}}</div>
    </li>
    <li><span>Image 08</span>
      <div class="slide">{{SP8}}</div>
    </li>
    <li><span>Image 09</span>
      <div class="slide">{{SP9}}</div>
    </li>
  </ul>
</ul>

以下是无限循环动画的关键，该动画具有多个可以工作而不会重叠的元素：

在animation-duration每个元件上应等于总和的时间对所有的元素完成其动画必需的。对于九个要进行动画处理（淡入，保持可见，淡出循环）的animation-duration元素20s ，每个元素上的应为9 * 20s = 180s。
每个元素仅应在20秒钟的时间内进行动画处理，在其余时间中，它们应保持空闲状态，以免与上一个或下一个元素重叠。可以使用以下两个设置来实现。
- 首先是仅在所有先前的元素都完成其自己的动画之后，才使每个元素开始其动画。因此，第一个元素没有延迟，第二个元素有20s（^第一个元素的动画的时间量），第三个元素有40s（前两个元素的动画时间），依此类推。后续元素。
- 其次是使元素在剩余的160秒内保持空闲状态（总动画持续时间-每个元素的动画时间）。之所以需要这样做是因为在此期间其他元素都在制作动画。这是通过修改keyframe设置来实现的，每个元素淡入并保持可见状态所花费的时间大约等于总动画持续时间除以总时间不。的元件（其只不过是1/9^个的100％）。
- 在原始动画你有问题地提供（6个元件），每个元件从去opacity: 0在0%到opacity: 1在8%和留原样直到16%（这是1/6^个的100％）。在这里，因为你必须9层的元件，在淡出应在开始11%（这大致1/9^个的100％）。因此，我们更改keyframe设置以使元素从opacity: 0at0%移到opacity: 1at 5%，然后保留opacity: 1到直到11%。之后，慢慢开始逐渐消失，直到达到目标16%。