【青训营】- 如何写一个网页轮播图

2021-08-22 824 阅读1分钟

网页轮播图

1、例子

用原生JS写一个电商网站的轮播图。

2、结构设计：HTML

轮播图是一个典型的列表结构，我们可以使用无序列表

3、展现效果：CSS

1、使用CSS绝对定位将图片重叠在同一个位置

2、轮播图切换的状态使用修饰符

2、轮播图的切换动画使用CSS transition

![image-20210816131837104](C:\Use s\CooLevin\AppData\Roaming\Typora\typora-user-images\image-20210816131837104.png)

4、行为设计：API

1、API设计应保证原子操作，职责单一，满足灵活性。

Slider
- +getSelectdltem() 当前选中要被展现的图
- +getSelectdItemIndex() 当前是第几张图
- +slideTo() 跳转到第几张图
- +slideNext() 展现下一张图
- +slidePrevious() 展现上一整图

行为设计：控制流

使用自定义时间来解耦

耦合与解耦：耦合是指两个或两个以上的体系或两种运动形式间通过相互作用而彼此影响以至联合起来的现象。解耦就是用数学方法将两种运动分离开来处理问题，常用解耦方法就是忽略或简化对所研究问题影响较小的一种运动，只分析主要的运动。