淡入淡出效果轮播图

图片轮播的方式有很多种,下面我们使用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,实现了淡出效果。

HTML代码:
在这里插入图片描述

HTML代码比较简单,就一个

里面放 ,给第一图片加上on类,这样网页加载的时候就会有图片出现,通过js来添加on类初始化可能比较慢,要等js加载。下面control是控制器,circle是页码,每张图片都有相对应的页码,同样给第一个页码加上on类,这个on就不是opacity属性了,而是background-color属性,相当于一个高亮效果。
在这里插入图片描述

js代码:
在这里插入图片描述

js代码也很简单,首先声明一个 var index = 0,用来记录图片当前位置。点击上一页的按钮后,先把图片、页码的on类去掉,然后自减1,再做一个判断,如果图片走到第一张图,就回到第五张图,最后再添加上on类。下一页按钮也一样,同样先去掉on类,这个时候就不是自减而是自增,判断如果图片到了第五张就返回到第一张图,再添加上on类。

自动轮播:

在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页