模仿幻灯片图片切换

说到图片切换，网页中也是经常出现的，而且有很多格式各样的切换效果。所以这期我们将用JQuery中的淡入、淡出效果，来模仿一下幻灯片图片切换。
首先让我们先了解一下淡入、淡出的代码。

淡入：fadeIn(); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。代码见下图：


淡出：fadeOut(); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。代码见下图：


介绍完淡入，淡出的代码，下面我们就来实现一个幻灯片图片切换的效果。

1、简单布局，一个div放三个img标签，也就是三张图片，加上id是为后面写JS代码用的。代码看下图：

2、布局完成，再为盒子和图片写上样式。代码和效果看下图：


3、最后就是写JaveScript代码了，利用淡入、淡出的结合来实现效果。代码看下图：

最后效果看动态图：

下期作品再见！！！