web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

一、实验题目: 轮播图

二、实验内容简介

1．整体布局：图片、左右按钮、数字列表、添加删除按钮

2、左右箭头滚动

3、小圆点滚动

4、自动轮播

5、鼠标动作：指向和离开

6、添加与删除

三、实验过程

1. 需求分析

整体布局：设计一个轮播图，中间部分为自动轮播的图片展示区域，每张图片的左上方显示图片的序号，左右箭头按钮用于切换图片，右下方小圆点数字列表用于导航到指定图片和显示当前展示图片的序号，且与显示的图片序号相同的小圆点按钮的背景颜色为红色。

在点击左右箭头按钮或小圆点按钮时，图片进行滚动且与滚动后的图片序号相同的小圆点按钮变为红色，当显示的图片为第一个时再按向左按钮时显示最后一个

图片。当鼠标移动到箭头时，鼠标图标变为手指。创建小圆点列表，用于显示当前图片的位置，并当单击小圆点时图片切换到对应的图片上。

自动轮播：一定时间间隔后向右变换一个图片，同时小圆点按钮向右变换为红色。在鼠标指向轮播图的区域时，轮播图将停止自动轮播，当鼠标离开时，轮播图接着当前状态继续自动轮播。

添加与删除：点击添加按钮时，轮播图增加一个图片和小圆点按钮、文本框显示的页数与添加后的红色小圆点序号相同。当增加到第九张时不再增加。点击“删减”按钮时，删除一个图片和小圆点按钮、文本框显示的页数与减少后的红色小圆点按钮相同。当减少的第二张时不再减少。

2．设计方案

（1）整体布局；

使用div布局，顶部、图片、内容、底部分别为一个div，中间部分为图片部分。在其中使用div布局图片左侧，图片中部，图片右侧，在图片右左侧部分用button加入按钮用于增加和删除图片，在图片中部用ul创建图片标签，并加入左右箭头滚动按钮，使用ul创建小圆点标签。

z-index针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别，表示一个元素在叠加顺序上的上下立体关系。设置z-index的值较大，可以相应地显示当前图片。

（2）左右箭头滚动：

清除所有图片的激活状态。因为图片的长度会根据增加或删除动态变化，所以需要在每次调用函数时，获取当前的图片数。循环遍历每张图片，设置图片和小圆点的样式，没有激活状态，则取消。

把当前图片的前一张设置为激活:当index=0，即为第一张图片时，修改index= imgs.length -1，即将图片设置为最后一张。否则index--，即为前一张图片。修改当前图片的和圆点的className，分别为"item imgShow”和“numnumShow"，使当前图叶显示和当前圆点背景颜色显示。

向右的箭头向右循环。操作与向左类似，当前图片为最后一张时，显示第一张图片。