js点击切换的轮播图

以下是一个简单的用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';
});

通过上述代码，我们实现了一个简单的点击切换的轮播图。其中，点击上一张按钮会切换到前一张图片，点击下一张按钮会切换到下一张图片。当切换到第一张图片时，再点击上一张按钮会切换到最后一张图片；当切换到最后一张图片时，再点击下一张按钮会切换到第一张图片。