HTML 轮播的实现

开发工具与关键技术：DW 轮播的实现
作者：李波
撰写时间：2019.1.16

轮播的实现
原理：移动盒子来实现，改变元素的位置。
一个盒子是显示区域，另一个盒子装载需要展示的图片。设置ID唯一的标识，后续通过id来绑定对应的盒子。注意通过选择器对图片大小进行设置（图片不设置会导致盒子被撑大或拉伸）对应css样式：最外层盒子是她的显示区域。给他设置所需要展示的窗口的大小（注意图片的大小，先对图片进行设置，要与外围盒子一致）她一个相对定位，方便后续图片轮播按钮进行定位。CSS部分不作展示；自行解决。下面是HTML部分：（注意红框部分插入的图片需要额外添加两张避免轮播出现断层）
1.下面是JS实现部分;我们需要通过ID获取到她的最外盒子，包裹部分的盒子，切换按钮，获取当前屏数：index，动画状态以及时间。如下图
2.接下来我们通过获取页面屏数给设置对应的屏数用于切换图片并给他加上高亮显示。设置点击事件，每次点击将视窗移动多少px。！！！（px值大小需要与图片大小对应，否则在轮播中会出现图片不全，拼接等情况）。计算公式：-（当前图片的宽度）*（目标屏数-当前屏数）

下面是animate() 方法执行 CSS 属性集的自定义动画。自定义动画执行时间，给动画设置动画时间

后续添加上下点击切换按钮，自动播放。本文所用代码截图来自课堂练习