学习时间：2017.3.22
轮播图学习笔记
1）获取移动块移动开始和结束的left值，然后计算出偏移量。
2）为了使移动块选择区能得到相应的图片并且选择区的样式对应改变，首先先判断下标是否等于选择区对应的图片，如果是，则默认的首个选择项样式改变为选中样式。否则，对应下标的样式改为选中。
3）但在设置前，我们要考虑到已经被选中的样式需要把它变为未选中，这里设置一个清除函数。清除函数将清除页面所有按钮被选中的效果，遍历所有按钮将它们的样式改为无即可。清除函数要在一开始被调用。
4）为了实现计时器功能，再开启计时器前先把之前的清除掉，这是为了避免在图片未能到达目标区域前又被移动导致的错位现象。
5）建立一个计时器，把计时器的参数定义为函数。在这个函数中，需要两个全局变量，分别记录时间和最终时间，当前时间初始化为0。当前时间逐渐增加，如果当前时间大于或等于最终时间，则清楚计时器。为了防止左右切换标记位置连续被按，所以要设置一个点击标志，点击标志默认为true，当图片到达终点时才能切换。
6）设置好了时间，要想移动块移动，还需要对移动块的left值进行改变。设置移动块的left等于开始位置加上改变的位移。这个改变的位移由偏移量除以最终时间再乘以当前时间得到。由于这种方法改变的字符串，所以别忘了加上字符px。
7）这样一来图片就可以顺利移动了，但是要做出轮播效果，需要当图片到达最后一张图片时把它瞬间切换回第一张，想到的办法是把第一张图片复制到最后一张图片的下一张，由于都是同一张图片，不会影响效果。
8）如果下标等于最后一张图片，并且当前时间大于等于最终时间时，即显示完最后一张图片后，设置移动块left为0，下标为第一张图片。
9）当每个按钮被点击时，对应图片会进行切换。遍历每个按钮，运行自动移动函数。
这是简历计时器的第一个参数，我用函数形式来表示。别忘了设置第二个时间参数。
10）做了对应移动效果之后，我需要再设置一个计时器来使这个移动效果默认向后滑动。这个计时器第一个参数我仍需要一个函数，第二个为时间参数。这一次我把函数放在外面。
11）我把这个函数命名为forward函数，自动向后go。下标值增加，当下标志到达最后一张时，把下标志变为第一张的下标志。由于这个下标是在多个函数中都需要用到，并且它值的改变是需要保存的，所以把下标定义在全局变量中。然后运行自动移动函数。
这样一来就实现了图片自动向下移动效果，并且选择图标的样式会跟着改变。
为了更人性化，我们需要考虑到用户需要看到上一张图片或下一张图片的需求。在图片两边增加左右切换按钮。
12）forward函数除了满足默认向后移动外，还可以满足显示下一张图片的需求。与forward函数相似的，来设置backward函数。这个函数需要把下标减少1，当图片下标到第一张时，要让它返回倒数第二张，left值要变为最后一张。
13）设置右切换按钮被点击后，如果点击标志为真，到达了最终位置，则运行forward函数，否则把点击标志改为假。同样的，设置左切换按钮点击事件。
14）最后还要考虑到，当鼠标悬停在图片上时，动画效果应该停止，这时清理计时器即可。而当鼠标移开的时候，又要重新设置计时器。
2.css部分
需要把整个轮播图设置相对定位，设置溢出即隐藏。
移动块因为在轮播图盒子里面，所以设置宽高为100%即可，用绝对定位来控制对齐。
图片设置左浮动。
下标用绝对定位来固定位置，并设置指针。
