05dayWeiApi

学习目标

一、1次性定时器、清理定时器

1、一次性定时器
语法：setTimeout(事件处理函数,时间);
参数1：函数		参数2：时间-->毫秒    返回值：该定时器的ID
2、清理定时器
语法：clearTimeout(定时器ID)
注意事项：如果定时器执行没有清理，那么定时器会一直占用内存当中

二、注意事项、获取left、top值···

所有在style标签的属性的属性值：是获取不到的

获取left值：对象.offsetleft

三、克隆元素

参数1：true是完全克隆 false：不包括给属性值、id值

需要克隆的元素/对象 . cloneNode(true);

四、无缝效果

无缝效果：页面中的第一个图片和最后一个图片是同一个图片

五、轮播图

1、轮播图总结

1、首先获取元素，需要用得到所有元素

2、根据有多少图片，创建多少个小按钮，添加自定义属性:索引值

3、追加到父级元素当中，给每个元素注册一个鼠标进入事件(排他功能)

4、先移除所有类样式，当前应用类样式，并声明一个全局变量，接收

当前按钮的索引值，移动该元素( - 当前索引 * 相框的宽)

5、默认让第一个按钮有背景颜色

6、因为要做无缝效果，克隆ul下的第一张图片，追加到最后一张

7、设置鼠标进入盒子显示箭头，鼠标离开不显示箭头

8、给显示右箭头注册一个点击事件

8.1、判断条件、判断当前索引如果等于等于ul的所有li的length-1,(就是当了最后一张图片),设置全局变量索引为0,并设置整个ul的left值为0

移动元素(ulObj,-index * imWidth)

8.2、i++.判断如果全局索引等于等于ul下的所有li，把第五个按钮颜色类样式干掉，并设置第一个按钮类样式，否则for干掉所有类样式，并设置当前索引的按钮为类样式

9、给显示左箭头注册一个点击事件

9.1、如果全局索引等于等于0，给索引值为5，并设置ul的left值为：第六张图片位置( -index * 相框宽的 + “px”)

9.2、移动元素，(ulObj, -index * imWidth);

for循环移除所有类样式，并设置当前索引的按钮为类样式

2、阶段：

第一阶段：获取元素

第二阶段：创建元素，添加自定义属性

第三阶段：鼠标进入当前按钮移动整个ul，当前 -索引值*相框宽度

第四阶段：默认让第一个按钮，应用类样式

第五阶段：鼠标进入盒子，显示箭头

第六阶段：克隆ul下的第一个li元素，并追加到ul下

第七阶段：点击右箭头，判断如果当前的索引是最后一张图片的

重新赋值index为0，并设置ul的left值为第一张图片

第八阶段：点击左箭头，判断如果当前的索引是第一张图片的

重新赋值index为5，并设置ul的left值为第六张图片

六、offset系列

1、用途:获取元素的width、height、left、top值

对象的属性	返回值
offsetWidth	元素的宽
offsetHeight	元素的高
offsetLeft	距离左边的值
offsetTop	距离上边的值

2、offsetLeft的注意事项

子级元素：

没脱离文档流offsetLeft：

父级元素的margin + 父级元素的padding + 父级元素的border + 自己的margin

脱离文档流offsetLeft: 自己的margin + 自己的left

七、document获取元素

document的属性	返回的元素
document.body	body元素
document.title	title标题元素
document.documentElement	HTML元素

八、获取当前鼠标的X/Y坐标

事件参数对象	属性	返回值
e	clentX	鼠标的left值
e	clentY	鼠标的top值