以下是一个简单的用JavaScript实现点击切换的轮播图的代码:
HTML部分:
<div class="slideshow">
<img src="image1.jpg" alt="Image 1" class="slide">
<img src="image2.jpg" alt="Image 2" class="slide">
<img src="image3.jpg" alt="Image 3" class="slide">
</div>
<div class="controls">
<button class="prev">上一张</button>
<button class="next">下一张</button>
</div>
CSS部分:
.slideshow {
position: relative;
}
.slide {
display: none;
}
.controls {
margin-top: 10px;
}
JavaScript部分:
// 获取轮播图容器和图片元素
var slideshow = document.querySelector('.slideshow');
var slides = document.querySelectorAll('.slide');
// 获取上一张和下一张按钮
var prevButton = document.querySelector('.prev');
var nextButton = document.querySelector('.next');
// 设置初始索引和图片的显示状态
var currentIndex = 0;
slides[currentIndex].style.display = 'block';
// 点击上一张按钮时切换到前一张图片
prevButton.addEventListener('click', function() {
slides[currentIndex].style.display = 'none';
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
slides[currentIndex].style.display = 'block';
});
// 点击下一张按钮时切换到下一张图片
nextButton.addEventListener('click', function() {
slides[currentIndex].style.display = 'none';
currentIndex = (currentIndex + 1) % slides.length;
slides[currentIndex].style.display = 'block';
});
通过上述代码,我们实现了一个简单的点击切换的轮播图。其中,点击上一张按钮会切换到前一张图片,点击下一张按钮会切换到下一张图片。当切换到第一张图片时,再点击上一张按钮会切换到最后一张图片;当切换到最后一张图片时,再点击下一张按钮会切换到第一张图片。