在JavaScript中实现“上一张”和“下一张”图片切换的功能,通常涉及到以下几个基础概念:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slider-container">
<img id="sliderImage" src="image1.jpg" alt="Slider Image">
<button id="prevBtn">上一张</button>
<button id="nextBtn">下一张</button>
</div>
<script src="script.js"></script>
</body>
</html>
.slider-container {
text-align: center;
}
#sliderImage {
width: 300px;
height: 200px;
}
button {
margin: 10px;
}
const images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg'
];
let currentIndex = 0;
const sliderImage = document.getElementById('sliderImage');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
function updateImage() {
sliderImage.src = images[currentIndex];
}
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateImage();
});
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % images.length;
updateImage();
});
通过以上步骤和代码示例,可以实现一个基本的图片切换功能,并解决常见的实现问题。
领取专属 10元无门槛券
手把手带您无忧上云