轮播的实现原理?
以四个图片的轮播为例
html部分:图片存放在ul li标签内,并使用一个div包裹ul
css部分: div设置relative,宽度为单个图片的宽度,并设置overflow: hidden
;ul设置absolute定位,宽度在js中设置(因为还需要clone首尾的图片,所以不在CSS中设置宽度),li全部左浮动
js部分
- 获取ul节点、获取实际图片的数量imgNum、获取单个图片的宽度imgWidth,定义一个索引curIndex记录当前显示的图片索引
- clone第一张图片并添加在图片列表的最后,clone最后一张图片并添加到图片列表的最前面,注意:此时显示的是最后一张图片的内容,需将ul向左移动一个图片宽度的距离
- 获取图片列表的宽度(并将其设置为ul的宽度(4+2张图片)),
- 定义以下接口:playNext(len)、playPre(len)
- playNext(): 执行该函数时使用动画将ul向左偏移一个图片(假设len=1)的宽度,动画结束后,将curIndex加1,同时判断curIndex是否为最后一个图片(此时显示的其实是第一个图片),如果是的,则将ul定位到真正的第一个图片的位置(使用css方法的left进行设置)
- playPre(): 该函数与playNext移动的方向相反,执行该函数时,使用动画将ul向右偏移一个图片的宽度,动画结束后,将curIndex减1,同时判断curIndex是否为第一个图片(此时显示的其实是最后一个图片),如果是的,则将ul定位到真正的最后一个图片的位置
轮播的实现需要注意几点:
- 图片需要排列成一排,并通过overflow:hidden只显示出一个图片
- 需要clone首尾图片,并添加到图片列表中,便于过渡,具体可以查看代码
- 轮播就是将图片列表的容器使用动画进行左右移动
实现视频中的左右滚动无限循环轮播效果
实现一个渐变轮播效果
原理:
- html与滚动轮播一样,注意css中图片容器宽度设置为图片的宽度,图片全部设置为absolute,同时只将第一个图片显示出来,其余的都设置为display:none
- js部分:使用jquery的fadeOut()函数隐藏当前图片,使用fadeIn()函数显示下一个将要显示的图片,即可完成淡入淡出的效果
代码演示
使用CSS 实现
在上面的实现代码中,使用的是绝对定位,调整left的值来进行轮播;另一种方法是使用css3的transform: translateX()
来移动图片,通过transition: transform
来添加动画效果
网友评论