<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slider {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.slider .slides {
display: flex;
width: 100%;
height: 100%;
}
.slider .slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
.slider .slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider .nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
z-index: 1;
}
.slider .nav button {
border: none;
background-color: rgba(255, 255, 255, 0.5);
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.slider .nav button.active {
background-color: white;
}
</style>
</head>
<body>
<div class="slider">
<div class="slides"></div>
<div class="nav"></div>
</div>
<script>
const slider = document.querySelector(".slider");
const slides = document.querySelector(".slides");
const nav = document.querySelector(".nav");
const navButtons = nav.children;
let currentIndex = 0;
let intervalId = null;
// 加载数据
fetchData();
// 启动自动轮播
startAutoPlay();
// 鼠标悬停时停止轮播
slider.addEventListener("mouseover", stopAutoPlay);
slider.addEventListener("mouseout", startAutoPlay);
/**
* 加载图片数据
*/
function fetchData() {
// 模拟从后端获取数据的过程
const data = [
{ url: "/images/op1/1.jpg", alt: "Image 1" },
{ url: "/images/op1/2.jpg", alt: "Image 2" },
{ url: "/images/op1/3.jpg", alt: "Image 3" },
{ url: "/images/op1/4.jpg", alt: "Image 4" },
];
// 遍历数据生成幻灯片
for (let i = 0; i < data.length; i++) {
const slide = document.createElement("div");
slide.className = "slide";
slide.innerHTML = `<img src="${data[i].url}" alt="${data[i].alt}">`;
slides.appendChild(slide);
// 生成导航按钮
const button = document.createElement("button");
if (i === 0) {
button.className = "active";
}
nav.appendChild(button);
}
}
/**
* 滚动到指定索引的幻灯片
* @param {number} index 幻灯片索引
*/
function goToSlide(index) {
currentIndex = index;
const slideWidth = slider.clientWidth;
const offset = -currentIndex * slideWidth;
slides.style.transform = `translateX(${offset}px)`;
// 更新导航按钮状态
for (let i = 0; i < navButtons.length; i++) {
navButtons[i].className = i === currentIndex ? "active" : "";
}
// 停止自动轮播,重置自动轮播计时
stopAutoPlay();
startAutoPlay();
}
/**
* 启动自动轮播
*/
function startAutoPlay() {
intervalId = setInterval(() => {
currentIndex++;
if (currentIndex >= slides.children.length) {
currentIndex = 0;
}
goToSlide(currentIndex);
}, 3000);
}
/**
* 停止自动轮播
*/
function stopAutoPlay() {
clearInterval(intervalId);
}
</script>
</body>
</html>