技能点:定时器 事件 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 属性可返回下拉列表中选项的索引位置。