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

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

相关推荐
Swift社区1 小时前
在 Swift 中实现字符串分割问题:以字典中的单词构造句子
开发语言·ios·swift
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
没头脑的ht1 小时前
Swift内存访问冲突
开发语言·ios·swift
没头脑的ht1 小时前
Swift闭包的本质
开发语言·ios·swift
wjs20241 小时前
Swift 数组
开发语言
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
stm 学习ing2 小时前
FPGA 第十讲 避免latch的产生
c语言·开发语言·单片机·嵌入式硬件·fpga开发·fpga
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
湫ccc3 小时前
《Python基础》之字符串格式化输出
开发语言·python