Css图像幻灯片放映有空白色空间

Question

我从网上获得了一个css幻灯片并安装了它，该演示中有8个图像，但我只想要3个，所以我已经尝试了100次以使其正常工作，但我根本无法< / p>

我为初始版本设置了一个jsfiddle - http://jsfiddle.net/jyfcm4jh/，它完美无缺。

并且还为修改后的版本设置了一个，只显示了3个图像，但是您可以看到在每个图像滑动到下一个图像之前出现空白

http://jsfiddle.net/jyfcm4jh/1/

这是我的css，我只编辑了3张图片

.css-slideshow img:nth-child(1) {
  -webkit-animation:xfade 15s 10s infinite;
  -moz-animation:xfade 15s 10s infinite;
  -ms-animation:xfade 15s 10s infinite;
  -o-animation:xfade 15s 10s infinite;
  animation:xfade 15s 10s infinite;
}

.css-slideshow img:nth-child(2) {
  -webkit-animation:xfade 15s 5s infinite;
  -moz-animation:xfade 15s 5s infinite;
  -ms-animation:xfade 15s 5s infinite;
  -o-animation:xfade 15s 5s infinite;
  animation:xfade 15s 5s infinite;
}

.css-slideshow img:nth-child(3) {
  -webkit-animation:xfade 15s 0s infinite;
  -moz-animation:xfade 15s 0s infinite;
  -ms-animation:xfade 15s 0s infinite;
  -o-animation:xfade 15s 0s infinite;
  animation:xfade 15s 0s infinite;
}

Answer 1

问题来自您的“xfade”百分比（@keyframes）。

以下是您应该如何选择值（from this website）：

  

对于“n”个图像您必须定义：

     

  
• a =一张图片的展示时间
  
• b =交叉渐变的持续时间
  
• 总动画持续时间当然是t =（a + b）* n
  

     

animation-delay = t / n或= a + b

     

关键帧的百分比：

     

  
1. 0％
  
2. A / T * 100％
  
3. （a + b）/ t * 100％= 1 / n * 100％
  
4. 100％ - （b / t * 100％）
  
5. 100％
  

---

修改

在你的情况下：

• a = 4s（4s期间每个颜色框出现）
• b = 1s（转换持续1秒）
• t = 15s（你选择15s作为总持续时间）

因此，您在CSS中的百分比应该是这样的（对于 每个 浏览器等价物）：

@-webkit-keyframes xfade {
  0% {
    filter:alpha(opacity=100);
    opacity:1;
  }

  27% {
    filter:alpha(opacity=100);
    opacity:1;
  }

  33% {
    filter:alpha(opacity=0);
    opacity:0;
  }

  93% {
    filter:alpha(opacity=0);
    opacity:0;
  }

  100% {
    filter:alpha(opacity=100);
    opacity:1;
  }
}

最后，您应该删除此CSS属性（除非您希望每次转换都有白框效果）：

/*
.css-slideshow img:nth-child(1),
.css-slideshow img:nth-child(2),
.css-slideshow img:nth-child(3) {
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter:alpha(opacity=0);
  opacity:0;
}
*/

你们都准备好了！

JSFIDDLE