题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
-
实现原理,左右滚动轮播为例
关于布局:
1. 初步布局:首先父容器相对定位,设定好宽高(确定轮播框大小),设置overflow:hidden溢出隐藏,在父容器内部设置img容器绝对定位,方便确定位置(注意不要限制死容器宽高,因为如果后面加入新的图片得修改值),设置overflow:hidden形成BFC,防止因浮动产生高度坍塌
2.img父容器内部为多个包含a链接(方便跳转链接)和img的li元素,给img设置好宽高,li元素左浮,横向排成一排,左右轮播键和底部的圆点都可通过绝对定位确定位置.关于实现逻辑:
1.通过移动img容器的位置来展现不同的图片,达到切换效果.实现方法:在img容器中,clone最后一个元素至首部,clone第一个元素至尾部,通过计算
(imgCount+2) * imgWidth得到img容器的宽度,imgCount为初始li元素的个数.
先确定好第一张展示图片的位置为$imgCt.css({left: -imgWidth}),当图片左右切换,img容器位置左右加减.当运动到clone首图片时,立即跳转到原来的首图片,设置css属性$imgCt.css({left: -imgWidth}).当运动到clone尾图片时,立即跳转到原来的尾图片$imgCt.css({left: -imgCount*imgWidth}),从而达到无限左右滚动效果,css属性切换在人眼看来是连贯的.
2.另外需要在展示不同图片的时候,知道这是第几张,设置标记位,第一张标记位为0,后面累加.最后一张为imgCount-1,通过不同的标记位img容器移动对应的位置,实现跳转图片.
函数接口:
//自动循环播放
autoPlay()
//左右切换键
playNext() //切换至下一张
playPre() //切换至上一张
//底部导航按钮切换效果
setBullet()
