<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.slideshow {
width: 400px;
height: 300px;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
display: none;
}
.slide img {
width: 100%;
height: 100%;
}
</style>
<body>
<script>
// 获取轮播图容器和所有轮播项
const slideshow = document.querySelector(".slideshow");
const slides = Array.from(document.querySelectorAll(".slide"));
let currentSlide = 0; // 当前显示的轮播项索引
// 显示指定索引的轮播项
function showSlide(index) {
slides[currentSlide].style.display = "none"; // 隐藏当前轮播项
slides[index].style.display = "block"; // 显示指定轮播项
currentSlide = index; // 更新当前轮播项索引
}
// 自动切换到下一张轮播图
function nextSlide() {
const nextIndex = (currentSlide + 1) % slides.length; // 计算下一张轮播图的索引
showSlide(nextIndex);
}
// 设置定时器，每隔一定时间切换到下一张轮播图
const interval = setInterval(nextSlide, 3000);
// 停止自动播放
function stopSlideshow() {
clearInterval(interval);
}
// 鼠标悬停在轮播图上时停止自动播放，移开时继续自动播放
slideshow.addEventListener("mouseover", stopSlideshow);
slideshow.addEventListener("mouseout", () => {
interval = setInterval(nextSlide, 3000);
});
</script>
<div class="slideshow">
<div class="slide">
<img src="../img/one.jpg" alt="" />
</div>
<div class="slide">
<img src="../img/two.jpg" alt="" />
</div>
<div class="slide">
<img src="../img/three.jpg" alt="" />
</div>
</div>
</body>
</html>
扫一扫
3451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
