轮播

1.自己做的奇怪的轮播（自己看完视频直接做的渐变轮播）
http://js.jirengu.com/sodeduyico/1/edit?html,css
2.哎，不是第一直觉的思路（渐变轮播）
http://js.jirengu.com/mezubiweqo/1/
3.视频中的（滚动轮播）
http://js.jirengu.com/nahabexene/1

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

轮播就是用JS来控制DOM元素的animate,css ,用CSS来控制可视窗口，从而展现效果。

例如，对于一个水平滚动轮播。实现步骤如下：
1.图片水平平铺，把想要展现的图片依次水平排列，可视窗口为一个图片大小。
2.用JS依次把图片向左移动，移动距离一个图片的大小。
3.考虑到移到最后一张图片，没有图片可展示。我们可以在DOM节点后再加个第一张图片，然后动画完成，立刻回到第一张图片。（为了用户体验，实际上动画完成以后，新加的最后一张就没用了）
4.图片向右移动也是同样的原理

那么垂直也可以是这样。
淡进淡出，就不用这么麻烦，因为我们有两个动画就可以控制了，fadeOut,fadeIn,不用加图片。

• 抽象的接口
  要考虑调用时候比较方便，添加与此有关的新功能时，不能让写的代码重新书写，要把我们的核心思想用代码展现。所以这个轮播的核心思想就是随心所欲的播放。play（）

2.视频中的（滚动轮播），代码见顶部。

1. 根据效果，确定CSS样式。
   2.JS实现。
   核心思想应该是，一个向任意方向（左右）移动任意格子的函数。
   考虑，当前，currentPage=1 ,targetPage=3,怎么实现。

 function play( currentPage,targetPage){
    do remove (targetPage-currentPage).width;
}
//然后再次向左移动1格，考虑到在这个已经移动的基础上，再次移动。
//然后再次向左移动2格。
我们会发现这个currentPage,始终等于执行前的targetPage.
所以，精简函数
currentPage=xx
function play(targetPage){
  do remove(targetPage-currentPage).width
  currentPage=targetPage
}
下面我们只要每次调用前，知道我们的targetPage在哪，就可以了，currentPage会被函数改变（记录）,闭包好啊。考虑一下场景，我们给了currentPage初始值，这个函数就像一个永动机可以无限制执行了。但是这是无限制的条件，就是左边有无数的图，我们的图是有限的，也就是不能无限制偏移，结合我们的具体情况，当图片到达最大值，立刻回到第一张。
比如，我们只有4张图片，用户不知道啊，所以，考虑用户想去第五张，赶紧让第五张等于第一张图片，然后，把currentPage初始化为1 ，这样，用户再想去第6张，实际上他看到的是我们的第二张。同样，如果用户开始想往左边去了（图片右滑），实际上我们curretpage=1的右边只能为有一张图片，怎么办，也是先往右执行下，然后立即初始化我们的currentPage.

在修改函数。
function play(targetPage){
  do remove(targetPage-currentPage).width
  currentPage=targetPage
  if(currentPage >pagelength){
      currentPage=1
    do（） 
  }
  if(currentPage===0){
    currentPage=4
    do()
  }
}

核心函数就这样出来了。然后想办法填充完善我们函数的功能就可以了。



这个函数中，我们用currentPage来表示我们当前页，所以，只要出现与功能不符合的情况，我们就可以console.log(currentPage) 来看看为什么没有出现想要的效果。

3 .代码见顶部。