HTML 部分：
创建了一个幻灯片容器 slider-container，里面包含了多个幻灯片 slide，每个幻灯片包含一张图片。
添加了上一张和下一张按钮 prev 和 next，用于手动切换幻灯片。
创建了一个指示器容器 dot-container，里面包含多个指示器点 dot，用于显示当前幻灯片的位置。
CSS 部分：
设置了幻灯片容器的样式，包括最大宽度、水平居中、隐藏超出内容等。
定义了幻灯片、图片、切换按钮和指示器点的样式。
为切换按钮和指示器点添加了鼠标悬停效果。
JavaScript 部分：
初始化幻灯片索引 slideIndex 为 1，并显示第一张幻灯片。
定义了 plusSlides 函数，用于切换幻灯片。
定义了 currentSlide 函数，用于显示指定的幻灯片。
定义了 showSlides 主函数，用于显示当前幻灯片，并更新指示器点的状态。
你可以将代码复制到一个 HTML 文件中，然后在浏览器中打开，就可以看到自适应的幻灯框效果。同时，你可以将图片链接替换为你自己的图片链接，以显示你想要的图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应幻灯框</title>
<style>
/* 幻灯片容器样式 */
.slider-container {
position: relative;
max-width: 1000px; /* 最大宽度 */
margin: auto; /* 水平居中 */
overflow: hidden; /* 隐藏超出容器的内容 */
}
/* 幻灯片样式 */
.slide {
display: none; /* 默认隐藏所有幻灯片 */
}
/* 幻灯片图片样式 */
.slide img {
width: 100%; /* 图片宽度自适应容器 */
height: auto; /* 高度自适应 */
}
/* 幻灯片切换按钮样式 */
.prev,
.next {
position: absolute;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 精确垂直居中 */
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
cursor: pointer;
}
/* 下一张按钮靠右 */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* 鼠标悬停在按钮上的样式 */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* 幻灯片指示器样式 */
.dot-container {
text-align: center;
margin-top: 10px;
}
/* 指示器点样式 */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
cursor: pointer;
}
/* 当前激活的指示器点样式 */
.active,
.dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<!-- 幻灯片容器 -->
<div>
<!-- 幻灯片 1 -->
<div>
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250306-df91c7bf3cfe2179f4428edd5c611e25.jpg" alt="Slide 1">
</div>
<!-- 幻灯片 2 -->
<div>
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250308-13f3d647f2d4044646d13bfd2c3d9790.jpg" alt="Slide 2">
</div>
<!-- 幻灯片 3 -->
<div>
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250302-e6e3198bde123ffa7d68659028cc95b0.jpg" alt="Slide 3">
</div>
<!-- 上一张按钮 -->
<a onclick="plusSlides(-1)">❮</a>
<!-- 下一张按钮 -->
<a onclick="plusSlides(1)">❯</a>
</div>
<!-- 幻灯片指示器容器 -->
<div>
<span onclick="currentSlide(1)"></span>
<span onclick="currentSlide(2)"></span>
<span onclick="currentSlide(3)"></span>
</div>
<script>
let slideIndex = 1; // 初始化幻灯片索引
showSlides(slideIndex); // 显示第一张幻灯片
// 切换幻灯片函数
function plusSlides(n) {
showSlides(slideIndex += n);
}
// 显示指定幻灯片函数
function currentSlide(n) {
showSlides(slideIndex = n);
}
// 显示幻灯片的主函数
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("slide"); // 获取所有幻灯片元素
let dots = document.getElementsByClassName("dot"); // 获取所有指示器点元素
// 如果索引超出幻灯片数量，回到第一张
if (n > slides.length) {
slideIndex = 1;
}
// 如果索引小于 1，回到最后一张
if (n < 1) {
slideIndex = slides.length;
}
// 隐藏所有幻灯片
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// 移除所有指示器点的激活状态
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// 显示当前幻灯片
slides[slideIndex - 1].style.display = "block";
// 设置当前指示器点为激活状态
dots[slideIndex - 1].className += " active";
}
</script>
</body>
</html>
发表评论