图片轮播的方式有很多种,下面我们使用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