Question

我需要一些帮助我想制作幻灯片，您可以根据需要添加任意数量的图片。但问题是我的滑块动画无法处理超过三张图片而且看起来不错。

＆＃13;

.slides {
  width: 600px;
  height: 300px;
  margin: 0px auto;
  overflow: hidden;
  border-radius: 10px;
}
.slidesContainer {
  width: 2400px;
  -webkit-animation: slide 8s ease infinite;
}
.slides .slide {
  width: 600px;
  height: 300px;
  float: left;
}
.slides div:nth-of-type(1) {
  background: #ff8330;
}
.slides div:nth-of-type(2) {
  background: #30ff83;
}
.slides div:nth-of-type(3) {
  background: #3083ff;
}
.slides div:nth-of-type(4) {
  background: #3083ff;
}
@-webkit-keyframes slide {
  15% {
    margin-left: 0px;
  }
  30% {
    margin-left: 0px;
  }
  45% {
    margin-left: -600px;
  }
  60% {
    margin-left: -600px;
  }
  75% {
    margin-left: -1200px;
  }
  90% {
    margin-left: -1200px;
  }
  105% {
    margin-left: -1800px;
  }
  120% {
    margin-left: -1800px;
  }
  135% {
    margin-left: 0px;
  }
}

＆＃13;

<div class="slides">
  <div class="slidesContainer">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
</div>

＆＃13;

这是问题所在，但我不知道另一种解决方案对我来说很好。

@-webkit-keyframes slide {
  15% {margin-left: 0px;}
  30% {margin-left: 0px;}
  45% {margin-left: -600px;}
  60% {margin-left: -600px;}
  75% {margin-left: -1200px;}
  90% {margin-left: -1200px;}
  105% {margin-left: -1800px;}
  120% {margin-left: -1800px;}
  135% {margin-left: 0px;}
}

Answer 1

试试这个，您可以添加任意数量的幻灯片，只需为每个图像添加延迟，如：

如果你有 5张图片 css将是（5x4 = 20s延迟）

img:nth-child(5){-webkit-animation-delay:20s;}

如果你有 6张图片 css将是（6x4 = 24s延迟）

img:nth-child(6){-webkit-animation-delay:24s;}

＆＃13;

body{background:#eee;}

.slider{
  margin:10px auto;
  width:500px;
  height:320px;
  overflow:hidden;
  position:relative;

}
.photo{
  position:absolute;
  -webkit-animation:round 16s infinite;
  opacity:0;
  width:100%;
  
}
@-webkit-keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){-webkit-animation-delay:0s;}
img:nth-child(3){-webkit-animation-delay:4s;}
img:nth-child(2){-webkit-animation-delay:8s;}
img:nth-child(1){-webkit-animation-delay:12s;}

＆＃13;

<div class="slider">
  <img class='photo'  src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
  <img class='photo'  src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
</div>

＆＃13;

纯CSS滑块动画

1 个答案: