写在前面

做到ife task002_3，轮播图花了我最长的时间来写，甚至让我开始反思自己是不是真的…不适合当一个程序员。我要成了程序员，有种侮辱了这个群体的感jio。最后看了一下，虽然也就125行的代码，断断续续我大概做了一周。😓

html&CSS也遇到问题：

1. 怎么把6张图片都塞到frame里面去不漏出来。简单一个overflow：hidden我就是想不到。
2. 6个按钮小圆点怎么放到frame里面。其实还是position的问题，我总是自以为了解position，然而到了真正实践的时候就出问题。小圆点div相对于frame的position要absolute。
3. 如何让图片有一个滑动的效果？我是看了DIYgod的代码之后，才知道要让图片float left，让图片div的宽度仅可能宽，让图片相对于左上角每次移动一部分距离，就能实现移动的效果了。

最要命的是JS部分

一开始我百度了一个轮播图的代码，是通过调整其他图片display：none，指定index的图片display：block。这样就简单实现了图片的切换。这样做也没有什么问题，但就是没有滑动的动画效果，看起来很low。

干脆继续参考DIYgod的代码。就有了上面提到的，让图片横向展开在页面中。每次切换让图片向左或向右移动一定的距离offset。也就是图片div的left增加或减少offset。如果移动一张图片距离，那么就是offset=img.width。

Next & Prev button

于是我先把next、prev点击切换的功能做出来，还算简单，主要注意的是next移动到第六张图片的时候，要跳回到第一张图片，要用if做个判断。prev移动到第一张照片的时候同理。

移动动画效果

到这里可以发现，到目前为止，功能做出来和display：none的那一版没有任何区别。因为移动在一瞬间就完成了，没有形成动画效果。

如果想要动画效果，要在一定时间time内逐步完成移动。做法是设置每个时间间隔interval移动一小段距离，那么每个时间间隔移动的距离就是offset / (time / interval)。然后设置一个setTimeout函数执行移动过程。

好，动手操作一下。然后就会惊奇的发现：操，我的轮播图怎么停不下来了？是因为setTimeout之后，每个时间间隔就会执行一次，不设置停止条件的话就会一直执行下去。那么停止条件是什么呢？图片移动了offset的距离，这个动画过程就应该结束。所以停止条件就是initialLeft + offset = newLeft的时候。

再来看看轮播图效果怎么样？next和prev按钮都可以使用了，而且也有了动画效果。小阶段目标完成，先给自己小小鼓励一下。

小圆点

接下来考虑实现小圆点和图片的index的同步。这中间也有一些trick，我随便想想发现悟不到就又看了Dg的代码。

首先考虑怎么做到让某个index的小圆点（下面用O表示）亮起来呢？Dg给出的方法是，给index的O添加一个class比如light，CSS中设置该class light的bgc=white，就相当于让index的O亮起来了，挺巧妙的。同时要注意，亮起来了，还要让他灭掉，也很简单，把所有O的light class都给remove掉。

好的，现在任意index的O都可以控制其亮或者不亮了。直接把这个方法封装成showBtn()。在next、prev的点击操作中，添加showBtn方法，就可以成功看到指定index的O亮起来了，和图片实现了同步。

小圆点这里还没完。通常在轮播图中点击某个位置的O，应该能跳转到该index的图片。这里Dg在html中给每个O设置了一个index=0~6属性，通过this.getAttribute()方法获取当前index。有了当前的index，和要移动到的index，相减乘以图片的width，就是要移动的offset。那么到这里这个功能也就实现了。

所以到最后的顺时针、逆时针播放就更简单了，setInterval()，每隔1000ms执行一次next或者prev，就OK了。但是要注意，如果先后点击playASC和playDESC，会发生鬼畜。解决方法是在这两个方法执行前先判断一下，如果setInterval的timer还在的话，就stop掉。这样鬼畜的问题也就解决了。

最后

别看我回顾就写了1.3k字，写代码花费的时间真的比我想象中的多多了。感觉那些程序员坐一下午能搞出各种各样的功能，我这……真的菜啊。