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

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

猜你喜欢

转载自blog.csdn.net/Lakeson/article/details/84495908