一、概念
现在一般的电商网站的首页都会有一个轮播图，如下图这样
这幅图可以拆分为三个功能
1、通过点击数字切换图片。
2、通过点击左右按钮切换图片。
3、鼠标没有停留在相框范围内时,自动轮询切换图片。
下面针对这三个功能，一个个单独讲解。
二、点击数字切换图片
效果
代码
公共common.js,下面所有的代码都会引用这个js。
//根据id获取元素对象
function my$(id) {
return document.getElementById(id);
}
1
2
3
4
5
6
上面代码中的注释说明的已经挺清楚的了。,这里再详细解释下面这段代码
animate(ulObj, -index * imgWidth) // 为什么这里传入的是负数
画了这幅图应该把这里原理讲的蛮清楚的。
三、点击左右按钮切换图片
效果
这里的效果主要有两点
1、在鼠标没有移动到相框里时候，左右按钮消失(焦点事件）
2、点击左按钮切换到下一张图片，点击右按钮时候切换到上一张图片(这里注释掉了overflow: hidden;属性 所以所有图片都会显示）
代码
<>
四、自动轮询切换图片
效果
这里的效果主要有两点
1、当鼠标不在相框范围内，相框中的图片进行自动切换图片
2、当鼠标进入相框范围内，此时相框中的图片停止不再移动
代码
原理
实现自动轮播有一个需要注意的原理
那就是第一张图需要和最后一张图是一样的,这里有五张图，那么第一张图和第五张图其实同一张图,当第四张图播放完即将切到第五张图的时候，
其实就是切换到第一张图，这样做的目的就是让整个循环轮播变的很自然
如果这里第五张和第一张图不一样就会有一闪的。
很明显当第四张播放完切换到第一张的图的时候，会有一闪的动作,使整个动作并不自然。
五、完整示例
效果最顶上已经演示了，这里展示代码就可以。
代码
<>
``` 你如果愿意有所作为，就必须有始有终。(27) ```