一、简易轮播图源代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简易轮播图显示</title><style type="text/css">*{margin: 0 auto;padding: 0;/* 全局重置边距 */}p{text-align: center;font-size: 25px;}.imgBox{width: 700px;height: 320px;padding: 0 auto;position: relative;/* 全局重置边距 */text-align: center;}.box{list-style-type: none;}.img-slide{width: 700px;height: 320px;/* 图片尺寸与容器一致 */padding: 0 auto;} #prev,#next{width: 95px;height: 95px;position: absolute;top: 115px;/* 垂直居中 */z-index: 1000;/* 确保在图片上方 */opacity: 0.2;/* 半透明 */transition: opacity 0.3s; /* 透明度过渡效果 */background-image: url(./left-right.jpg);background-repeat: no-repeat;}#prev{left: 0px;background-position: 0 -80px;}#next{right: 0px;background-position: -165px -80px;}#prev:hover,#next:hover{opacity: 0.7;/* 悬停时更明显 */}#circlebutton ul{position: absolute;bottom: 20px;/* 固定在底部 */left: 50%;transform: translateX(-50%);/* 精确水平居中 */text-align: center;list-style-type: none;display: flex;/* 弹性布局 */justify-content: center;align-items: center;gap: 10px;/* 项间距 */}#circlebutton ul li{display: flex;justify-content: center;align-items: center;}.divEle{width: 30px;height: 30px;background: rgba(221, 221, 221, 0.7);/* 半透明灰色 */border-radius: 50%;/* 圆形 */text-align: center;display: flex;justify-content: center;align-items: center;/* 文字居中 */cursor: pointer;color: #333;font-size: 14px;font-weight: bold;transition: all 0.3s ease;/* 平滑过渡 */}.divEle.active {background: rgba(255, 0, 0, 0.7);/* 激活状态红色 */color: white;transform: scale(1.1);/* 轻微放大 */}</style></head><body><p>简易轮播图<p><div class="imgBox"><!-- 左右导航按钮 --><div id="prev"></div><div id="next"></div><!-- 图片列表 --><ul class="box"><li><img class="img-slide img1" src="./s1.jpg" alt="1" style="display: block;"></li><li><img class="img-slide img2" src="./s2.jpg" alt="2" style="display: none;"></li><li><img class="img-slide img3" src="./s3.jpg" alt="3" style="display: none;"></li><li><img class="img-slide img4" src="./s4.jpg" alt="4" style="display: none;"></li><li><img class="img-slide img5" src="./s5.jpg" alt="5" style="display: none;"></li></ul><!-- 圆形页码指示器 --><div id="circlebutton"><ul><li><div class="divEle active">1</div></li><li><div class="divEle">2</div></li><li><div class="divEle">3</div></li><li><div class="divEle">4</div></li><li><div class="divEle">5</div></li></ul></div></div><script type="text/javascript">window.onload = function() {var index = 0;// 当前图片索引var divCon = document.getElementsByClassName("divEle");// 所有指示器var imgEle = document.getElementsByClassName("img-slide");// 所有图片var divPrev = document.getElementById("prev");// 上一张按钮var divNext = document.getElementById("next");// 下一张按钮var change1;// 定时器变量// 初始化轮播change1 = setInterval(autoChangeImg, 3000);// 初始化3秒自动切换// 为指示器添加事件for(var i = 0; i < divCon.length; i++) {divCon[i].index = i;// 存储索引divCon[i].onmouseover = function() {if(index == this.index) {return;// 已是当前则不处理}index = this.index;changeImg();clearInterval(change1);change1 = setInterval(autoChangeImg, 3000);}}function changeImg() {// 重置所有状态for(var i = 0; i < imgEle.length; i++) {imgEle[i].style.display = 'none';divCon[i].classList.remove("active");}// 设置当前状态imgEle[index].style.display = 'block';divCon[index].classList.add("active");}function autoChangeImg() {index++;if(index >= imgEle.length) {index = 0;// 循环}changeImg();// 更新显示}// 上一张按钮divPrev.onclick = function() {clearInterval(change1);index--;if(index < 0) {index = imgEle.length - 1;}changeImg();change1 = setInterval(autoChangeImg, 3000);};// 下一张按钮divNext.onclick = function() {clearInterval(change1);index++;if(index >= imgEle.length) {index = 0;}changeImg();change1 = setInterval(autoChangeImg, 3000);};// 鼠标悬停暂停divNext.onmouseover = function() {clearInterval(change1);}divPrev.onmouseover = function() {clearInterval(change1);}// 鼠标离开恢复divPrev.onmouseout = function() {change1 = setInterval(autoChangeImg, 3000);}divNext.onmouseout = function() {change1 = setInterval(autoChangeImg, 3000);}}</script></body>
</html>
二、 整体与核心
1.整体结构分析
这个轮播图包含三个主要部分：
(1)图片展示区：显示当前图片
(2)导航按钮：左右箭头切换图片
(3)页码指示器：底部圆形页码显示当前图片位置
2.核心功能流程
(1)初始化：
①加载第一张图片
②启动3秒自动轮播
③第一个指示器显示为激活状态
(2)自动轮播：
①每3秒切换到下一张
②更新指示器状态
③循环播放
(3)用户交互：
①点击左右按钮切换
②点击指示器跳转
③悬停导航按钮暂停
(4)状态同步：
①图片显示与指示器状态始终保持一致
②任何交互后重置自动轮播计时器
3.轮播图实现原理
(1)初始化：
默认显示第一张图片（display:block），其他隐藏（display:none）。第一个指示器激活（active类）。
(2)自动轮播：
使用setInterval每隔3秒调用一次autoChangeImg函数，将index加1，然后调用changeImg函数更新显示。
(3)切换图片函数changeImg：
隐藏所有图片，移除所有指示器的active类，然后显示当前索引的图片并给对应指示器添加active类。
(4)左右按钮：
点击时清除定时器，然后改变index（上一张index--，下一张index++），处理边界（循环），然后更新图片并重新设置定时器。
(5)指示器：
鼠标悬停时，将index设置为指示器的索引，然后更新图片，并重置定时器。
(5)鼠标悬停在左右按钮上时，清除定时器（暂停自动轮播），鼠标移出时重新开始定时器。
三、HTML结构详解
1. HTML知识点
文档类型声明：<!DOCTYPE html>
字符编码设置：<meta charset="utf-8">
标题：<title>
样式表：<style>
脚本：<script>
结构元素：<div>, <ul>, <li>, <img>
类名（class）和ID：用于CSS和JS选择元素
2.HTML结构详解
<div class="imgBox"><!-- 左右导航按钮 --><div id="prev"></div><div id="next"></div><!-- 图片列表 --><ul class="box"><li><img class="img-slide img1" src="./s1.jpg" alt="1" style="display: block;"></li><!-- 其他图片项 --></ul><!-- 圆形页码指示器 --><div id="circlebutton"><ul><li><div class="divEle active">1</div></li><!-- 其他页码项 --></ul></div>
</div>
知识点：
- div容器：<div>用于组织页面内容
- 列表元素：<ul>无序列表和<li>列表项组织图片和页码
- 图片元素：<img>标签显示图片
- ID和类名：id用于唯一标识元素（如prev, next）
- class用于标识一组元素（如divEle, img-slide）
四、CSS样式解析
1. CSS知识点
全局样式重置：* { margin:0; padding:0; } 清除默认边距
文本居中：text-align: center
盒模型：width, height, padding
定位：position: relative（相对定位）和position: absolute（绝对定位）结合使用
弹性布局：display: flex, justify-content, align-items
圆角：border-radius: 50% 实现圆形
过渡效果：transition
背景图片：background-image, background-repeat, background-position
透明度：opacity
层叠顺序：z-index
鼠标指针样式：cursor: pointe
2.CSS样式解析
(1)全局设置
* {margin: 0 auto;padding: 0;
}作用：重置所有元素的默认边距和内边距
知识点：*是通配符选择器，选择页面所有元素
(2)轮播图容器
.imgBox {width: 700px;height: 320px;position: relative;
}作用：定义轮播图容器的大小和定位方式
知识点：position: relative设置相对定位，为内部绝对定位元素提供参考
(3)导航按钮样式
#prev, #next {width: 95px;height: 95px;position: absolute;top: 115px;z-index: 1000;opacity: 0.2;transition: opacity 0.3s;
}作用：设置左右按钮的样式
知识点：
position: absolute绝对定位，相对于最近的定位祖先元素
z-index控制元素堆叠顺序
opacity设置透明度
transition添加透明度变化动画
(4)页码指示器样式
.divEle {width: 30px;height: 30px;border-radius: 50%;background: rgba(221, 221, 221, 0.7);transition: all 0.3s ease;
}.divEle.active {background: rgba(255, 0, 0, 0.7);color: white;transform: scale(1.1);
}作用：创建圆形页码指示器及其激活状态
知识点：
border-radius: 50%创建圆形
rgba()设置带透明度的颜色
transform: scale(1.1)轻微放大效果
.active类表示当前激活状态
五、JavaScript功能解析
1. JavaScript知识点
事件：window.onload（页面加载完成时执行）
获取元素：document.getElementsByClassName, document.getElementById
定时器：setInterval, clearInterval
循环：for循环 - 函数定义和调用
操作CSS样式：element.style.display, element.classList（添加/移除类）
事件处理：onmouseover, onmouseout, onclick
变量作用域：全局变量和局部变量
2.JavaScript功能解析
(1)初始化变量
var index = 0;
var divCon = document.getElementsByClassName("divEle");
var imgEle = document.getElementsByClassName("img-slide");
var divPrev = document.getElementById("prev");
var divNext = document.getElementById("next");
var change1;作用：存储轮播图状态和控制元素
知识点：
document.getElementsByClassName()获取相同类名的元素集合
document.getElementById()通过ID获取元素
(2)自动轮播功能
change1 = setInterval(autoChangeImg, 3000);function autoChangeImg() {index++;if(index >= imgEle.length) index = 0;changeImg();
}作用：每3秒自动切换到下一张图片
知识点：
setInterval()定时执行函数
循环逻辑：当到达最后一张时返回第一张
(3)图片切换函数
function changeImg() {for(var i = 0; i < imgEle.length; i++) {imgEle[i].style.display = 'none';divCon[i].classList.remove("active");}imgEle[index].style.display = 'block';divCon[index].classList.add("active");
}作用：更新显示的图片和页码状态
知识点：
style.display控制元素显示/隐藏
classList操作元素的CSS类
add()和remove()添加/移除类
(4)用户交互功能
// 页码指示器交互
divCon[i].onmouseover = function() {// 切换到对应图片
}// 上一张按钮
divPrev.onclick = function() {// 切换到上一张
}// 下一张按钮
divNext.onclick = function() {// 切换到下一张
}// 悬停暂停功能
divPrev.onmouseover = function() { clearInterval(change1); }
divNext.onmouseover = function() { clearInterval(change1); }
divPrev.onmouseout = function() { change1 = setInterval(autoChangeImg, 3000); }
divNext.onmouseout = function() { change1 = setInterval(autoChangeImg, 3000); }作用：实现用户与轮播图的交互
知识点：
onclick点击事件
onmouseover鼠标悬停事件
onmouseout鼠标移出事件
clearInterval()清除定时器
六、核心知识点总结
| 知识点 | 应用位置 | 作用 |
|---|---|---|
| HTML结构 | 整个文档 | 构建页面骨架 |
| CSS定位 | 导航按钮、页码 | 精确控制元素位置 |
| CSS过渡 | 按钮透明度、页码状态 | 创建平滑动画效果 |
| JavaScript DOM操作 | 图片切换、页码更新 | 动态改变页面内容 |
| 事件处理 | 按钮点击、鼠标悬停 | 响应用户交互 |
| 定时器 | 自动轮播 | 实现自动切换功能 |
| 循环控制 | 图片切换逻辑 | 实现循环播放 |
和reactive()区别)
 594. 最长和谐子序列 (哈希表))
