实训7 制作轮播图定时器
1. 实训目的
通过使用JavaScript制作轮播图定时器，实现在网页中展示多张图片，并自动切换图片的效果，增加网页的动态性和吸引力。
2. 实训内容
制作轮播图定时器，每隔一秒钟切换一张图片，在图片切换的同时，切换图片下方的文字，当最后一张图片播放完成后，重新播放。
3. 实训要求
通过实训，掌握DOM元素操作的基本方法，掌握定时器的使用方法。
4. 实训条件
（1）实验设备：计算机一台。
（2）工具：VisualStudio Code。
（3）其他：笔，实训报告纸。
5. 实训步骤
（1）在HTML文件中创建一个容器元素，用于显示轮播图。可以使用<div>标签，并为其设置一个唯一的ID属性，例如<div id=”slideshow”>。
（2）在CSS文件中定义轮播图容器的样式，包括宽度、高度、背景颜色等。您可以使用CSS选择器和属性来实现样式定义。
（3）在JavaScript文件中，使用document.getElementById方法获取轮播图容器的引用，并将其保存在一个变量中。
（4）创建一个包含多张图片链接的数组。每个链接都代表一个要展示的图片。
（5）使用setInterval函数创建一个定时器，设置图片自动切换的时间间隔。
（6）创建一个nextImage函数，用于切换到下一张图片。在nextImage函数中，将获取到的图片链接设置为轮播图容器的背景图。
（7）在网页加载完成后，调用nextImage函数一次，以显示初始的第一张图片。
（8）为轮播图容器添加鼠标事件监听器，以实现鼠标悬停时暂停播放，鼠标离开时重新开始播放的功能。
6. 大模型辅助实现
本实训仍然采用 ModelScope_平台的CodeLlama34B 大语言模型生成代码，具体步骤可参考实训2。
