第一步 布局

轮播图盒子→ul插入图片→左右两个按钮

注意点：按钮使用的链接标签，所以链接中书写 "javascript:;" 这样点击的时候就不会刷新页面了

第二步 css样式

效果：

第三步 javascript

定义idx,idx代表ul中的第几张图片 var idx = 0 ； 同时，在ul的CSS样式中增加相对定位和left值，这样left值改变，ul图片才能左右移动 以及设置每张图片过渡属性

（1）先设置右按钮点击

1.1 这样点击右按钮可以向右换图，但是点到最后一张图，ul还会继续左移，盒子内出现空白。 于是我们就要用 【if语句】进行控制 【if语句】要写在 idx++ 后面，这样每次idx=0后，left值才能等于0

不过现在又出现个小问题： 虽然能够回到第一张图，但是效果是从最后一张图 “轱辘” 回第一张的 因为有过渡属性。我们想让其瞬间回到第一张

1.2 于是用到小技巧【克隆第一张图 让克隆图当最后一张 也就是第6张图】

1.3 设置延时器，并且取消过渡属性，这样就行变戏法，0.5s延时后，最后一张变为第一张

1.4 又出现小问题，右按钮点击一轮后，过渡属性就没有了。 现在在延时器结束后，再给过渡属性加回来

（2）下面设置左按钮

1.1 和右按钮同样的道理，在第一张按左按钮，ul继续右移动出现空白。 于是在按左按钮的时候，函数要先判断是不是第一张，如果是 就瞬间切换到第5张。 同时取消过渡属性

1.2 if语句结束后，加上过渡属性。

1.3 此时发现在第一张图点击左按钮又会 “轱辘” 回来。 小技巧：增加一个【0秒延时器】，让idx=0的时候，立马取消过渡，再立马加回过渡属性

要将上面的idx=5 删掉，在延时器中书写idx=4，从第四张恢复过渡属性 最后加上else语句**（说实话，这块我也没太明白）** 反正最后能自由切换，并且都有过渡属性