轮播的实现(17)

题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

• 横向轮播（题目2）：

  • 布局：让父容器相对定位，设定宽高为一个图片的宽高，并且overflow:hidden（超出部分不显示）；在父容器中设置一个图片容器，高度为图片高，宽度为图片宽*图片个数；在底部设置小圆点，绝对定位居于父容器底部；（横向轮播图组件react代码， 横向轮播图scss代码）
  • 逻辑：一开始将尾图片和首图片clone后，分别放在首尾；增加图片容器的宽度；封装向前/向后翻页的方法（包含动画，动画锁，变化小圆点状态）；最后为按钮添加事件（逻辑处理代码）
  • 全局变量：curPage（当前第几张图片）和isAnimate（动画加锁）
  • 封装函数：play(n):封装向后n页（n可以是负数），playNext:向后，playPre:向前。

• 淡入淡出、自动轮播图（题目3）

  • 布局：类似与横向轮播。但是图片是绝对布局，可以互相覆盖。一开始只有第一张图片是显示，其他隐藏。react组件，scss样式

• 逻辑：与横向轮播类似，不需要clone首尾图片、重设宽度，但要设置定时器循环翻页(逻辑处理代码)

• 全局变量和封装函数：与横向轮播类似，方法play(n)

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

• 代码链接
• 效果链接

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

• 代码链接
• 效果链接