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';
});

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

相关推荐
ohMyGod_12323 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界25 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku29 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员32 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句33 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿35 分钟前
Web第二次笔记
前端·javascript
Dream耀40 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
洋流41 分钟前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码43 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
然我1 小时前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试