淡入淡出效果轮播图

图片轮播的方式有很多种，下面我们使用js原生代码来写出其中一种方式——淡入淡出效果。
js原生和jQuery、还有Css都可以实现这个效果，jQuery因为封装了很多用法，所有使用起来
很简单、也方便了许多，其实也就是用js原生模拟出的这些用法。不管怎样，构造出一个基本的表现层那是必须的。

对于淡入淡出效果方式的主要思路： 图片淡入淡出效果是“不透明度”（Css opacity属性）的变换过程。举个例子，如果让图片淡出，就是图片的opacity属性在一段时间内逐渐从1变成0；淡入呢，则是图片的opacity属性在一段时间内逐渐从1变成0。用transition可以轻松实现。

1.初始，我们把img的opacity设置为0，所以我们看不见。我们用js来给img加上on类，那么img的opacity就等于1，因为加上了transition属性，所以要等2s，opacity才能完全等于1，实现了淡入效果。

2.淡出效果，也是一个道理，等img淡入完了之后，再用js来给img去掉on类，那这时候img的opacity也就从1变成0，因为也加上了transition属性，所以也要等2s，opacity才能完全等于0，实现了淡出效果。

HT