js点击切换的轮播图

原创

于 2024-06-12 16:47:41 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

以下是一个简单的用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.addEventList