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时,清除该定时器。

至此,一个完整的图片轮播就完成了。在此附上一个完整轮播图的代码,代码仅供帮助理解使用,切勿盲目复制。


猜你喜欢

转载自blog.51cto.com/14071672/2341240
0条评论
添加一条新回复