一、实验题目: 轮播图
二、实验内容简介
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”，使当前图叶显示和当前圆点背景颜色显示。
向右的箭头向右循环。操作与向左类似，当前图片为最后一张时，显示第一张图片。
(3)小圆点滚动：
单击小圆点，显示当前小圆点对应的图片，并且小圆点对应的背景色发生变化。
通过for循环遍历每一个小圆点，为其绑定单击事件。为了记录当前操作小圆点的序号，为其添加no属性，即nums[i].no=i。为每个小圆点绑定事件，nums[i].οnclick=function(){…}。使用clearActive函数清除小圆点和图片的激活状态，为当前操作的小圆点设置激活状态。“this.no”表示当前操作小圆点的序号，nums[this.no]表示当前操作小圆点，imgs[this.no]表示当前操作小圆点对应的图片。因为单击小圆点以后，继续单击向左向右按钮，图片应当在当前基础上轮播，所以需要将当前激活状态图片的索引号index与当前操作小圆点的下标同步，即index= this.no。
(4)自动轮播
网页启动后，轮播图自动从小到大数字轮播。设置自动轮播函数。因为图片是从小到大的顺序显示，所以index++；当index与图片数相同时，没有更多的图片，回到第一张图片，即index=0。清除所有图片和小圆点的激活状态，设置当前图片和小圆点为激活状态。为网页的加载事件添加函数，<body οnlοad=”init()”>，在init函数中设置定时器，每隔2000ms执行一次auto函数。timer = setInterval(auto,2000)。
定义auto 函数，将index自增为1，当index 长度达到图片imgs 长度时，重新返回第一张图片。通过clearActive 函数，清除小圆点和图片的激活状态。通过定义init 函数用setInterval 添加定时器每两秒更换一次，启动图片的自动轮播。
(5)鼠标动作
需要实现鼠标指向和离开的效果，例如当鼠标悬停在图片上时，暂停轮播效果，离开时图片继续轮播。鼠标指向时清除定时器，clearInterval(timer)。鼠标离开时设置定时器，每隔2000ms执行一次auto函数，即timer=setInterval(auto,2000)。
首先获得元素，设置鼠标指向时clearInterval(timer)清除定时器；鼠标离开时重新调用timer函数，每隔2000毫秒自动执行一次自动轮播，将所有按钮的CSS样式，设置为cursor: pointer，实现鼠标指向时变为手指图标的功能。
(6)添加与删除
单击添加按钮，添加一个图片和小圆点按钮，并且添加的图片和小圆点按钮，处于激活状态。当图片增加到9张时不能继续添加。因为图片的个数是动态变化的，所以每单击增加一次，需重新获取图片的个数。
添加新的图片之前先clearInterval(timer)清除定时器，使用clearActive函数清除小圆点和图片的激活状态。
使用var创建属性，当单击添加时，对图片数量进行改变，nums1增加到9，消除计时器，清除图片激活状态，创建新结点newli 设置背景格式，增加到父元素ul 中。创建新圆点，重新赋值index，同步激活图片，当单击删除时，当nums1>2是删除，清除图片激活状态，删除父元素的最后一个子元素，修改图片父元素和圆点父元素的className，重新赋值index，imgNum.value使图片激活状态同步。
最后，需要实现增加和减少图片的功能，需要在js当中书写。首先，代码通过document.getElementById和document.getElementsByClassName方法获取了HTML文档中的多个元素：
在addImg.onclick函数中，当点击增加图片按钮时，会先获取当前的图片数量。如果图片数量小于9，则暂停定时器和激活状态，然后创建一个新的li元素。
设置其内容为当前图片数量加1，背景为对应的图片，背景大小为1500px 400px，同时添加了”item active”类名。然后，将新创建的li元素添加到包含图片的父元素中，创建一个新的li元素，设置其内容为当前图片数量加1，并添加了”point pointActive”类名。最后将新创建的点元素添加到包含图片数量提示的父元素中。
在subImg.onclick函数中，当点击减少图片的按钮时，会先获取当前的图片数量。如果图片数量大于2，则暂停定时器和激活状态，移除最后一个图片元素和对应的元素，并将移除后的图片元素的类名改为”item Active”，点元素的类名改为”point pointActive”。
3.效果截图
(1)整体布局
(2)左右箭头滚动
(3)小圆点滚动
(4)自动轮播
(5)添加与删除
4.知识点总结及感受
知识点总结：
HTML结构：
首先，你需要使用HTML来构建轮播图的基本结构。通常情况下，你可以使用一个包含轮播项的div元素来创建轮播图的容器。
CSS样式：
使用CSS来设计和布局轮播图。你可以设置容器的宽度、高度、边距和背景等属性，以及对于轮播项的样式，如大小、位置和过渡效果等。
JavaScript轮播功能：
使用JavaScript来控制轮播图的行为。最常用的方式是使用定时器来自动切换轮播项。你可以使用setInterval函数来设置定时器，并定义一个函数来在特定时间间隔内切换轮播项。另外，你还可以使用clearInterval函数来清除定时器。
HTML属性：
class：用于为 HTML 元素指定一个或多个类名，以便于通过 CSS 或 JavaScript 样式或操作相应的元素
id：指定 HTML 元素的唯一标识符，可以通过 JavaScript 在页面中选择和操控具有特定 id 的元素。
src：用于指定需要嵌入到 HTML 页面的外部资源（如图片、音频或视频）的 URL。
href：用于指定链接元素（如锚点、外部样式表或外部脚本）的目标 URL。
CSS 属性：
color：用于设置文本颜色。
font-size：用于设置文本字体的大小。
background-color：用于设置元素的背景颜色。
margin：用于设置元素的外边距。
padding：用于设置元素的内边距。
JavaScript 属性：
innerHTML：用于获取或设置 HTML 元素的内容。
style：用于获取或设置元素的 CSS 样式属性。
value：用于获取或设置表单元素（如输入框、下拉列表等）的值。
src：用于获取或设置图像或媒体元素的源文件 URL。
clearInterval和setInterval都是JavaScript中用于创建和控制定时器的函数。
setInterval函数：它用于循环执行指定的代码或函数，以一定的时间间隔重复执行。它接受两个参数：要执行的代码或函数和时间间隔（以毫秒为单位）。例如：
setInterval(function(){// 要执行的代码}, 1000); //每隔1秒执行一次
clearInterval函数：它用于停止由setInterval创建的定时器。它接受一个参数，即要停止的定时器的标识符。这个标识符通常是setInterval函数的返回值。例如：
var timer = setInterval(function(){
// 要执行的代码
}, 1000); //每隔1秒执行一次
clearInterval(timer); //停止定时器
通过结合使用setInterval和clearInterval，我们可以实现定时执行某些操作并且在需要时停止执行。这对于需要定期更新内容、检查状态或执行周期性任务的情况非常有用。
需要注意的是，当使用定时器时，提供的时间间隔是近似的，具体取决于浏览器和其他执行的任务。因此，实际执行的时间间隔可能会有所变化。
innerHTML、indexOf 和 createElement 都是 JavaScript 中常用的方法和属性。
innerHTML：
是一种用于获取或设置 HTML 元素的内容的属性。当你获取元素的 innerHTML 属性时，它会返回元素的 HTML 内容。当你设置 innerHTML 属性时，它会将给定的 HTML 内容插入元素中，替换原有的内容。示例：
var element = document.getElementById(“myElement”);
// 获取元素的内容
var content = element.innerHTML;
// 设置元素的内容
element.innerHTML = “<p>New content</p >”;
indexOf：
是用于获取字符串中指定子字符串的首次出现位置的方法。它接受一个参数，即要查找的子字符串，并返回子字符串在主字符串中的索引值。如果找不到子字符串，则返回 -1。示例：
var str = “Hello, World!”;
var index = str.indexOf(“World”); // 返回 7
var notFoundIndex = str.indexOf(“WeTab”); // 返回 -1
createElement：
是用于创建新的 HTML 元素的方法。它接受一个参数，即要创建的元素的标签名，返回对应的新元素。你可以使用其他 DOM 方法（例如 appendChild）将新元素插入到文档中。示例：
var newElement = document.createElement(“div”); // 创建一个 div 元素
newElement.textContent = “Hello, world!”; // 设置新元素的文本内容
document.body.appendChild(newElement); // 将新元素插入到文档的 body 中
innerHTML、indexOf 和 createElement 在 JavaScript 开发中非常有用。innerHTML 为处理 HTML 内容提供了便捷的方式，indexOf 可以帮助你查找和处理字符串中的特定文本，而 createElement 可以动态创建和操作 HTML 元素。
感受：
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。学习web中javascript的感受。对于javascript，我想说：它在节省时间、解决兼容性等方面具有不可替代的作用，越是发展今天，在web前端开发领域，javascript的作用也越加显著；同时，javascript也是一门持续进步的语言，在语言的发展和更新中，会引入更多的新特性使得javascript的功能更加的强大，让设计师们可以利用它挖掘出更多强大的功能，更加简单的实现复杂的效果。
总之，javascript帮助我们创造出了更加精美的网页，也为web设计师们带来了巨大的重担，让我们可以更加清晰的看清用户的需求，更加优秀的实现网页设计和使用体验，具有不可替代的作用。
版权声明：本文为博主作者：嘿！所有人给我站一边！原创文章，版权归属原作者，如果侵权，请联系我们删除！
原文链接：https://blog.csdn.net/jdkzeus/article/details/133889123
