淡⼊淡出效果轮播图
图⽚轮播的⽅式有很多种，下⾯我们使⽤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，op acity才能完全等于1，实现了淡⼊效果。
2.淡出效果，也是⼀个道理，等img淡⼊完了之后，再⽤js来给img去掉on类，那这时候img的opacity也就从1变成0，因为也加上了transition属性，所以也要等2s，opacity才能完全等于0，实现了淡出效果。
HTML代码：
HTML代码⽐较简单，就⼀个
⾥⾯放 ，给第⼀图⽚加上on类，这样⽹页加载的时候就会有图⽚出现，通过js来添加on类初始化可能⽐较慢，要等js加载。下⾯control是控制器，circle是页码，每张图⽚都有相对应的页码，同样给第⼀个页码加上on类，这个on就不是opacity属性了，⽽是background-color 属性，相当于⼀个⾼亮效果。
js代码：
js代码也很简单，⾸先声明⼀个 var index = 0，⽤来记录图⽚当前位置。点击上⼀页的按钮后，先把图⽚、页码的on类去掉，然后⾃减1，再做⼀个判断，如果图⽚⾛到第⼀张图，就回到第五张图，最后再添加上on类。下⼀页按钮也⼀样，同样先去掉on类，这个时候就不是⾃减⽽是⾃增，判断如果图⽚到了第五张就返回到第⼀张图，再添加上on类。
js实现轮播图最简代码⾃动轮播：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。