html完整轮播代码

HTML完整轮播代码

html>
    head>
    	title>
    HTML轮播/title>
    	style>
.slide{
    display:none;
}
.active{
    display:block;
}
    	/style>
    /head>
    body>
    	div class="slider">
    img src="slide1.jpg" alt="Slider 1" class="slide active">
    img src="slide2.jpg" alt="Slider 2" class="slide">
    img src="slide3.jpg" alt="Slider 3" class="slide">
    img src="slide4.jpg" alt="Slider 4" class="slide">
    	/div>
    	button id="prevBtn">
    上一个/button>
    	button id="nextBtn">
    下一个/button>
    	script>
    var slides = document.querySelectorAll(".slide");
    var nextBtn = document.getElementById("nextBtn");
    var prevBtn = document.getElementById("prevBtn");
    var currentIndex = 0;
    slides[currentIndex].classList.add("active");
nextBtn.onclick = function(){
    slides[currentIndex].classList.remove("active");
    currentIndex++;
    if(currentIndex >
= slides.length){
    currentIndex = 0;
}
    slides[currentIndex].classList.add("active");
}
prevBtn.onclick = function(){
    slides[currentIndex].classList.remove("active");
    currentIndex--;
    if(currentIndex
本代码实现了一个简单的HTML轮播功能，通过JavaScript监听上一个和下一个按钮的点击事件，切换当前图片。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！