渐变轮播

2019年10月30日07:56:45 发表评论 144 views

有bug的
bug体现在,刷新页面的时候,第一次按左按钮,第2张图片会出现3次,我一直以为是js的哪里写错了,但是通过对比,纠错,始终找不到bug产生的原因,突然想到,如果js没有写错,那就是css写的不对,于是更改了css
无bug

缓存节点信息,保存图片宽度和图片数量

设置页面初始显示的图片是第一张,设置播放锁,从第下标为0的第一张图片开始播放

播放的方法

左右按钮的播放方法

调用左右按钮的方法,以及设置小圆点点击时,找到对应的下标,然后显示对应下标的图片

当小圆点移动时,添加class,之前的index移除class。设置自动播放以及当鼠标放在ct的页面里时,清除定时器,调用自动播放。当进入页面时,页面就会自动播放

总结:

通过轮播的2种方式,学到了在css中,不同的轮播实现方法,对应相同的页面显示逻辑,体现出对相对定位和绝对定位的运用,z-index使用

js部分就是,学会运用false 和 true 设定动画锁,css用js来添加,移除样式

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: