原生JS焦点图切换
具体思路: 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数 三、可自定义是否自动轮播 提示: 1、 index不能一直无限制的递增下去,需做判断 2、调用切换图片函数时需将递增之后的index作为参数传过去 三、定义图片切换函数 提示: 1.缓存上一个active数据,清除prev,给当前轮播或点击的图片加active。 2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。 3. 改变index的值,让其等于传递过来的参数值 4.prev的值在切换函数中改变 注意:放图片的ul的top值=-index*单张图片的高度(所有图片必须等高) 四、鼠标划过整个容器时,图片停止切换,离开继续 提示:
- 鼠标滑过整个容器时清除定时器
- 鼠标离开时继续执行定时器,切换至下一张图片