模仿幻灯片图片切换
开发工具和关键技术：Adobe Dreamweaver CC 2017， JQuery
作者：金建勇
撰写时间：2019年2月16日
说到图片切换，网页中也是经常出现的，而且有很多格式各样的切换效果。所以这期我们将用JQuery中的淡入、淡出效果，来模仿一下幻灯片图片切换。
首先让我们先了解一下淡入、淡出的代码。
淡入：fadeIn(); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。代码见下图：
淡出：fadeOut(); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。代码见下图：
介绍完淡入，淡出的代码，下面我们就来实现一个幻灯片图片切换的效果。
1、简单布局，一个div放三个img标签，也就是三张图片，加上id是为后面写JS代码用的。代码看下图：
2、布局完成，再为盒子和图片写上样式。代码和效果看下图：
3、最后就是写JaveScript代码了，利用淡入、淡出的结合来实现效果。代码看下图：
最后效果看动态图：
下期作品再见！！！