一．面向对象轮播
效果图：
功能思路分析:
**1. ** 面向对象框架搭建
**2. ** 渲染数据
1.通过**map().join(‘’)**分别渲染导航和内容的数据
2.渲染时在导航菜单上挂载自定义属性保存下标
3.默认给第一个高亮( 添加类名 )
**3. ** 封装公用切换方法
1.先把上一项的类名去掉( classList.remove() )
2.修改下标
3.当前项类名加上( classList.add() )
4.内容盒子向上移动，修改marginTop = -400 * 当前下标
**4. ** 点击菜单切换
1.给菜单大盒子绑定点击事件，通过事件委托找到每一个标签
2.通过getAttribute()获取绑定在标签上的下标
3.调用切换方法传递下标
**5. ** 自动轮播
1.设置定时器，每隔指定时间调用
2.下标累加
3.调用切换方法传递下标
**6. ** 滑入显示滑出隐藏
1.给大盒子绑定鼠标滑过事件(mouseover)
2.鼠标滑过时清除定时器(clearInterval)
3.给大盒子绑定鼠标离开事件(mouseout)
4.鼠标滑过时清除定时器(clearInterval)
#二．进度条
效果图:
功能思路分析:
1. 设置进度条默认值
2. 渲染进度条
3. 渲染多个进度条
根据数据循环调用封装好的进度条
将数据中的信息传参
#三．今日小结
1.构造函数: constructor
2.原型对象: prototype
3.合并参数: Object.assign({},{},obj)
4.获取自定义属性: 元素.getAttribute()
5.鼠标滑过事件: mouseover
6.鼠标离开事件: mouseout
7.清除定时器: clearInterval()
#四. 作业 -- 进度条
效果图:
功能思路分析:
1. 倒计时功能
1.根据数据中的hourbuyTime中的activityTime起始时间和endTime结束时间完成倒计时功能
2.计算结束时间和起始时间的时间差，根据时间差求出年月日时分秒
2. 产品渲染功能
1. 根据数据中的productList给定的产品数据，并通过**map().join()**来完成渲染
2. 调用进度条方法(产品数据中的rebate值是进度条的值)来实现进度条功能
3. 进度条功能
1. return拼接好的进度条的HTML结构
2. 通过进度条的值，比例0.8转成百分比80%设置进度条的宽
4. 鼠标滑过产品的高亮效果通过纯CSS来实现