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

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

相关推荐
LXS_3571 小时前
Day 05 C++ 入门 之 指针
开发语言·c++·笔记·学习方法·改行学it
fruge1 小时前
React 2025 完全指南:核心原理、实战技巧与性能优化
javascript·react.js·性能优化
etsuyou3 小时前
js前端this指向规则
开发语言·前端·javascript
shizhenshide3 小时前
为什么有时候 reCAPTCHA 通过率偏低,常见原因有哪些
开发语言·php·验证码·captcha·recaptcha·ezcaptcha
mit6.8243 小时前
[Agent可视化] 配置系统 | 实现AI模型切换 | 热重载机制 | fsnotify库(go)
开发语言·人工智能·golang
友友马3 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱4 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
小白学大数据4 小时前
实战:Python爬虫如何模拟登录与维持会话状态
开发语言·爬虫·python
一念&4 小时前
每日一个C语言知识:C 结构体
c语言·开发语言
锦***林5 小时前
用 Python 写一个自动化办公小助手
开发语言·python·自动化