题目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()

题目2： 实现视频中的左右滚动无限循环轮播效果

实现方法1
实现方法2

题目3： 实现一个渐变轮播效果, 效果范例

实现代码