jquery实现轮播图
web网页上的首页,经常会出现轮播图。
第三方的轮播图存在效果单一,扩展性低等问题。
自定义录播图特点:
1.功能全面
2.可维护性高
3.扩展性高
4.易于兼容其他前端框架
效果图:
实现思路:
1.布局
通过叠罗汉方式将图片展示区、上一张下一张点击区,指示灯展示区层叠显示
主画布wrap层在最低层,其次是图片展示区,上一张下一张点击区覆盖图片展示区,
指示灯展示区覆盖图片展示区。
2.CSS样式
将wrap层相对布局,图片展示区、上一张下一张点击区、指示灯展示区层设置为绝对布局。
wrap层作为包涵体,对图片展示区、上一张下一张点击区、指示灯展示区层进行层叠布局。
通过display:flex设置盒子弹性布局对指示灯展示区层进行居中排列
通过display:block和dispaly:inline-block讲行级元素转换成块级元素
3.js
(1)web界面渲染后,开启图片从左向右切换的定时器