查看详情
备忘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片轮播</title>
<style>
#slider {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#slider img {
width: 100%;
height: auto;
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slider img.active {
opacity: 1;
}
</style>
</head>
<body>
<div id="slider">
<img src="image1.jpg" alt="Image 1" class="active">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<button onclick="prevImage()">Prev</button>
<button onclick="nextImage()">Next</button>
<script src="slider.js"></script>
</body>
</html>
JavaScript代码
// slider.js
let currentIndex = 0;
const images = document.querySelectorAll('#slider img');
const totalImages = images.length;
function showImage(index) {
images.forEach((img, i) => {
img.classList.remove('active');
});
images[index].classList.add('active');
}
function nextImage() {
currentIndex = (currentIndex + 1) % totalImages;
showImage(currentIndex);
}
function prevImage() {
currentIndex = (currentIndex - 1 + totalImages) % totalImages;
showImage(currentIndex);
}
// 自动轮播
setInterval(nextImage, 3000);