用JavaScript写一个简单的轮播图
首先我们先设置好结构和样式
基本结构如下：
页面效果：
？思考（首先我们需要做些什么）：
- 获取元素
- 注册事件（上一张 / 下一张图片；小圆；鼠标放在wrap里时，鼠标离开weap时）
- 删除active类的函数（按钮 / 小圆）
- 添加active类的函数（按钮 / 小圆）
- 执行函数
- 定时器
- 清除定时器
以上，后面我们开始来写代码
1，获取元素
2，注册事件
这里我们把事件的执行代码封装成函数（这里mouseenter和mouseleave的鼠标事件先不考虑）
我们给每一个小圆（li）设置了一个自定义属性data-index；属性值从 0 开始，表示当前点击的小圆是哪一个小圆
3，按钮和小圆点的执行函数
这里我们需要先设置一个index变量，然后在去写我们的执行函数；
index这个变量主要是由于确定当前显示的图片为第几张，因为我们
var items = document.getElementsByClassName(‘item’);
获取过来的items是一个伪数组，数组的下标是从 0 开始，所以
给变量设置初始值为：var index = 0;
4，删除与添加active
每执行一次按钮或小圆的点击事件时，我们需要先删除掉之前添加过active的li ，然后在重新给目标元素 li 添加上active
- 这里我们给所有图片和小圆重新给上item这个类名，这样带有active的图片和小圆就失去了active这个类
5，定时器
当然，以上代码并没有实现我们想要的自动轮播图的效果，因为我们还缺少一个东西：定时器
js 定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
1000毫秒 == 1秒
清除定时器
定时器清除的方法：对于的定时器使用对应的清除方法
- clearInterval(obj) =》清除setInterval()
- clearTimeout(obj) =》清除setTimeout()
添加定时器和 mouseenter 和 mouseleave 的鼠标事件
记得清除了定时器后，在重新给定时器时，要重新让变量 timer 重新接收
以下有感兴趣的可以了解一下
mouseover和mouseenter的区别
mouseout和mouseleave的区别
@小小怪