Javascript图片淡出？

Question

我有一个基本的JavaScript图像幻灯片，循环显示4个图像，延迟时间为5秒。

有没有办法让每张图片都淡入而不是只是立刻出现？也许使用css3过渡效果??

我不想使用任何预先制作的幻灯片插件或任何东西，我试图用JavaScript来制作它。

Here is a codepen link

提前致谢

Answer 1

在这里：你在之前的评论中谈到过。一个在Jquery中做你想做的事情的jsFiddle。 http://jsfiddle.net/HhpW5/5/ 你具体问过如何在div之间进行更改 我只是通过使用XOR按位运算符并连接到前缀来演示这个演示：“demo”导致：“demo0”或“demo1”

  toggle^=1;

其他一切对我的评论非常自我解释。希望这会有所帮助。

Answer 2

试试这个： -

See Transition

Play around with transtions

#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;
}