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

太过爱你忘了你带给我的痛 2022-04-14 06:38 109阅读 0赞

技能点：定时器 事件 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;

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20220414/68109e4408d348ab903b0864a1d574cc.png