<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
.slideshow {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
.slideshow img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
}
.prev { left: 0; }
.next { right: 0; }
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<button class="prev" onclick="plusSlides(-1)">❮ Prev</button>
<button class="next" onclick="plusSlides(1)">Next ❯</button>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let slides = document.querySelectorAll('.slideshow img');
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slides[slideIndex - 1].style.display = 'block';
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
