javascript - Javascript图像褪色？

Question

我有一个基本的 JavaScript 图像幻灯片，它以 5 秒的延迟循环播放 4 张图像。

有什么方法可以让每张图像淡入而不是立即出现？也许使用 css3 过渡效果？

我不想使用任何预先制作的幻灯片插件或任何东西，我试图自己制作这个只是 JavaScript。

这是一个codepen链接

提前致谢

Answer 1

给你：正如之前的评论中所讨论的那样。一个 jsFiddle，可以在 Jquery 中做你想做的事。 http://jsfiddle.net/HhpW5/5/ 您专门询问了如何在 div 之间进行更改，我在此演示中只需使用 XOR 位运算符并连接到前缀：“demo”，结果为：“demo0”或“演示1”

  toggle^=1;

其他一切都可以用我的评论来解释。希望这可以帮助。

Answer 2

试试这个：-

见过渡

玩转转换

#demo {
  background: #969696;
  width: 400px;
  height:300px;
  color: white;
  font-size: 50px;
  font-family: verdana;
  -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
}