慕课 京东项目焦点图轮播特效

技能点：定时器 事件 JS动画 函数递归 无限滚动

功能：自动播放 左右焦点切换 底下小按钮切换

必须要在给div设置overflow:hidden; 前，设置宽度和高度，否则盒子就会塌陷。

左右箭头开始是隐藏display:none;，鼠标进入图片时才显示为display:block;。注意，是给.arrow盒子设置display，不是给span设置。

点击箭头：触发事件+绑定。

 

比较width 与 offsetWidth 的区别

1、offsetWidth > width  
element.offsetWidth  = element.style.width + element.style.padding + element.style.border；（不包括margin）

2、offsetWidth 属性仅仅可读，而style.width 是可写的； 
所以通常用 style.width用作进JavaScript中设置元素的宽度，而offsetWidth不可以。

3、offsetWidth 属性返回值是整数，如果实际值是小数，会根据实际值进行四舍五入操作，返回处理后的整数。width=44.499px；输出结果为49； 
width=44.5px；输出结果为45； 
而style.width的返回值是字符串，并且带有单位 
width=44.499px；输出结果为44.499px；

4、style.width仅仅能返回以style方式定义的内部样式表的width属性值。 
因此样式写在行内的时候<div id="box" style="width:100px">，用style.width或者offsetWidth都可以获取元素的宽度； 
如果写在css样式表中的时候，.box{width:100px;}，此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空。
 

.grid-col2-l .imgs{
    position:absolute;
    width:5900px;

}  

/*十分重要，因为要左浮动在同一行，最简单的方法就是让这个图片列表不占据空间位置，宽度设为无限大*/

for (语句 1; 语句 2; 语句 3) { 被执行的代码块 }    注意符号别写错了

index 属性可返回下拉列表中选项的索引位置。