1. 轮播器效果图
1. 正常状态下每 1.5秒 自动轮播下张图片，轮播结束从头开始重复
2. 鼠标悬停时停止轮播，可以选择左右图片切换
2. HTML 结构
文档类型声明： 声明文档类型为HTML5。HTML标签： 表示这是一个中文的HTML文档。头部：
标签内包含了文档的元数据。
指定文档的字符编码为UTF-8。 用于优化移动设备上的显示效果。
标签定义了文档的标题，这里为“Picture carousel”。</p>
<p>样式：<style> 标签内定义了CSS样式，用于美化轮播图。主体：<body> 标签内包含了页面的所有内容。</p>
<p>.slider 类定义了轮播图的整体样式和位置。.slide-track 类定义了包含所有幻灯片的轨道。.slide 类定义了单个幻灯片的样式。.prev 和 .next 类定义了上一张和下一张图片的控制按钮样式。.indicators 类定义了轮播指示器的容器样式。.indicator 类定义了单个指示器的样式。</p>
<p>图片和按钮：</p>
<p><div class="slide"> 标签包含了图片。<span class="prev"> 和 <span class="next"> 是控制按钮，点击时调用JavaScript函数 moveSlide。</p>
<p>指示器容器：<div class="indicators"></div> 用于存放指示器。</p>
<p>3. CSS 样式</p>
<p>.slider：定义了轮播图容器的宽度、边距、溢出隐藏、相对定位和阴影效果。.slide-track：定义了轨道的布局方式（不换行）、过渡效果和将改变的内容（优化性能）。.slide：定义了幻灯片的大小、背景、文字样式和过渡效果。.slide img：定义了图片的填充方式，使其覆盖整个幻灯片区域。.prev, .next：定义了控制按钮的基本样式，包括指针、定位、颜色、背景和过渡效果。.slider:hover .prev, .slider:hover .next：定义了鼠标悬停时控制按钮的透明度。.indicators：定义了指示器容器的位置和文本对齐方式。.indicator：定义了单个指示器的大小、边距、背景色、圆角和指针样式。.indicator.active：定义了激活状态下的指示器背景色。</p>
<p>4. JavaScript 脚本</p>
<p>变量定义：定义了当前索引、幻灯片元素、总幻灯片数、幻灯片宽度和相关DOM元素。创建指示器：循环创建指示器，并为每个指示器添加点击事件，用于切换幻灯片。更新幻灯片位置：updateSlidePosition 函数根据当前索引更新幻灯片轨道的位置。更新指示器状态：updateIndicators 函数用于更新指示器的激活状态。移动幻灯片：moveSlide 函数用于根据传入的方向参数来更新当前索引，并调用更新函数。自动轮播：设置定时器 autoSlideInterval，每隔一定时间自动切换幻灯片。鼠标悬停事件：为轮播图容器添加鼠标悬停事件监听器，用于在鼠标悬停时停止自动轮播，在鼠标离开时重新开始。</p>
<p>4. 源代码</p>
<p><!DOCTYPE html></p>
<p><html lang="zh-CN"></p>
<p><head></p>
<p><meta charset="UTF-8"></p>
<p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p>
<p><title>Picture carousel
