web前端端技术详细解析左右滑动轮播图
首先,在解析轮播图的实现原理之前,我们得知道什么是轮播图。
顾名思义,轮播图就是在网页中能够循环播放并且可以手动切换的图片。轮播图一般作为banner出现在网页头部靠下的位置,用以向用户展示一些比较重要或热门的东西。
轮播图的播放效果有很多种,今天我们只取其中一种进行原理解析,因为虽然效果略有不同,但是实现机制却也相差无几。
总体思路是:
1.html布局上:在最外层套一个盒子,暂且称它为box,宽度为一张图片的宽度,设置相对定位和溢出隐藏,为了方便,box里面放一个ul,设置绝对定位,ul里面便是一个li放一张图片,然后让li浮动,再给box定位一个左右按钮和一个用来放控制图片的小圆点的ol。
2.css设置样式:定义一个active的class来控制被选中的小圆点的样式
3.js控制轮播:
a准备工作:引入一个运动的插件,获取需要的box、ul、li、ol、按钮,获取图片的张数和宽度,然后克隆第一张图片插入ul里面,给ul设置宽度为(图片数量+1x图片宽度),
定义一个空数组arr存储小圆点,index存当前图片,btnIndex存小圆点下标,标志位flag判断图片是否处于播放状态。
b制作轮播:用for循环创建与图片数量相等的小圆点,给它绑定点击事件,并给第一个小圆点加上active的class,将创建的小圆点插入定义的数组,将小圆点从内存里拿出来放到ol里面。
点击小圆点控制图片切换:点击时先利用flag判断当前图片是否处于播放状态,如果未播放就设为播放状态,然后将上一张图片的active清除并给当前图片加上active,相应的index和btnIndex也得变为当前的,用运动插件控制ul进行定位,动画结束时将flag变为未播放状态。
点击向右切换:首先同样判断图片的播放状态,清除上一张图片对应的小圆点的样式,并让图片和小圆点对应的index和btnIndex分别+1,然后判断index等于图片数量和大于图片数量,如果等于,就让btnIndex = 0,如果大于就让index=btnIndex-=1
并让ul的left为0,然后给当前图片对应的小圆点添加active,并用运动插件控制ul进行定位,动画结束时将flag变为未播放状态。
点击向左切换:同样判断图片的播放状态,清除上一张图片对应的小圆点的样式,并让图片和小圆点对应的index和btnIndex分别-1,然后判断
Index<0或者btnIndex<0,如果其中一个小于0,就将ul的left赋值为负的(图片数量x图片宽度),并让index和btnIndex都等于(图片数量-1), 然后给当前图片对应的小圆点添加active,并用运动插件控制ul进行定位,动画结束时将flag变为未播放状态。
定时器控制图片自动播放:创建一个定时器timer,当鼠标mouseenter时,在定时器里面调用向右切换的函数,当鼠标mouseleave时,清除该定时器。
至此,一个完整的图片轮播就完成了。在此附上一个完整轮播图的代码,代码仅供帮助理解使用,切勿盲目复制。
- 可以通过左右滑动和点击小按钮来实现图片的轮播
- webpack详细配置解析
- web轮播图 可配置循环左右滚动
- Android使用ViewPager实现左右循环滑动及轮播效果
- UIScrollview实现左右循环滑动和自动轮播
- Android 使用ViewPager实现左右循环滑动及轮播效果
- ViewPager实现左右循环滑动及轮播效果(广告栏效果)
- bootstrap轮播图手机端左右滑动事件
- Android中mpchartlib柱状图的详细属性以及实现(可左右滑动可点击)
- webview加载大图片,左右滑动问题解决
- Android使用ViewPager实现左右循环滑动及轮播效果
- BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
- 自定义通用viewpager(左右无限滑动,自动轮播)
- React 轮播图之二菜单栏左右滑动特效(swiper.js)
- 手机web图片左右滑动动画效果分享
- Android实现图片自动轮播并且支持手势左右无限滑动
- 移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
- [置顶] viewPager+photoView实现图片轮播和手势缩放功能 支持手势缩放的imageView 如何实现相册左右滑动和手势缩放 如何让图片自适应控件大小 photoView如何使用(上)
- 网络防火墙封阻攻击应用技术详细解析
- Bootstrap_让Bootstrap轮播插件carousel支持左右滑动手势的三种方法