轮播图实现思路

轮播图实现思路

1、鼠标移入移出事件，显示左右切换按钮
- 监听鼠标移入mouseover,鼠标移出mouseout事件，设置focus.style.display来实现显示和隐藏
2、动态设置下方的小圆点
- 获取图片元素，遍历图片然后每次遍历通过createElement来创建一个小圆点
3、点击小圆点高亮显示
- 利用排他思想
4、点击小圆点切换对应的图片
- 创建小圆点的时候给每个小圆点自定义属性作为索引
- 点击小圆点获得当前索引
- 图片偏移量为 索引值*图片宽度
5、点击按钮切轮播图
- 声明变量记录当前索引值，每次点击进行++或者–
- 需要进行边界判断
- 让小圆点同步高亮显示
6、无缝滚动
- 最后一张图clone第一张图
- 如果当前是clone的这张图，就立马回到第一张图（这个过程不需要缓动动画）
7、自动轮播
- 利用setInterval定时器实现
- 鼠标移入清除定时器
- 鼠标移出开始定时器