1

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

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

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

这是一个codepen链接

提前致谢

4

2 回答 2

4

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

  toggle^=1;

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

于 2013-05-07T01:43:55.253 回答
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;
}
于 2013-05-07T01:01:09.353 回答