如何用原生JavaScript编写简易轮播图功能？

本文共计970个文字，预计阅读时间需要4分钟。

本文将分享一个JavaScript实现的轮播图效果示例代码。以下是大致内容：

功能：

1.每2.5秒自动切换下一张轮播图；

2.底部按钮可切换对应轮播图；

3.鼠标移入暂停轮播。

代码示例：

javascript// 轮播图元素const carousel=document.getElementById('carousel');const images=carousel.querySelectorAll('img');const dots=carousel.querySelectorAll('.dot');

// 当前显示的图片索引let currentIndex=0;

// 自动轮播function autoPlay() { currentIndex=(currentIndex + 1) % images.length; updateCarousel();}

// 更新轮播图显示function updateCarousel() { images.forEach((img, index)=> { img.style.display=index===currentIndex ? 'block' : 'none'; }); dots.forEach((dot, index)=> { dot.classList.toggle('active', index===currentIndex); });}

// 切换图片function changeImage(index) { currentIndex=index; updateCarousel();}

// 初始化function init() { // 设置定时器，每2.5秒自动切换图片 setInterval(autoPlay, 2500);

// 点击底部按钮切换图片 dots.forEach((dot, index)=> { dot.addEventListener('click', ()=> changeImage(index)); });}

// 调用初始化函数init();

HTML结构：

CSS样式（可选）：css#carousel img { width: 100%; height: auto;}

.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 5px; background-color: #bbb; border-radius: 50%; display: inline-block;}

.dot.active { background-color: #717171;}

使用方法：

1.将代码复制到HTML文件中；

2.添加轮播图图片和底部按钮；

3.修改图片路径和样式。

注意：

- 代码示例仅供参考，具体实现可能需要根据实际情况进行调整；- 建议使用现代浏览器测试代码。

本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下

一、功能：

1、每隔2.5s自动切换下一张轮播图；

2、底部按钮切换对应轮播图；

3、鼠标移入暂停自动切换，移出开始；

4、鼠标移入，左右切换按钮出现，并可左右切换轮播图。

二、效果（GIF）：

三、代码：

结构层（HTML）

<div class="box"> <img src="./image/banner1.jpg" /> <div class="arrows left"> <img src="./image/left.png" /> </div> <div class="arrows right"> <img src="./image/right.png" /> </div> <ul class="buttom"></ul> </div>

表现层（CSS）

.box { width: 300px; height: 200px; background: #333; border-radius: 5px; overflow: hidden; margin: 0 auto; font-size: 0; position: relative; display: flex; align-items: center; } .box:hover .arrows{ display: block; } .box img{ width: 100%; } .arrows { width: 20px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; font-size: 30px; display: none; } .left{ left: 10px; } .right{ right: 10px; } .buttom{ list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .buttom li { width: 20px; height: 5px; border-radius: 1px; background: #fff; margin: 0 2px; } .active { background: red !important; }

行为层（JavaScript）

let count = 0 // 创建当前轮播图下标 // 获取DOM元素 let box = document.querySelector('.box') let img = document.querySelector('img') let left = document.querySelector('.left') let right = document.querySelector('.right') let ul = document.querySelector('ul') // 轮播图片数组 let imgArr = [ './image/banner1.jpg', './image/banner2.jpg', './image/banner3.jpg', './image/banner4.jpg' ] // 遍历图片数组 添加对应底部切换li标签 imgArr.forEach(() => { let li = document.createElement('li') ul.appendChild(li) }) let lis = document.querySelectorAll('li') // 获取所有li标签 lis[0].className = 'active' // 给第一个li标签添加选中状态 // 执行切换轮播图 function switchImg (type) { return function() { if(type == 1) { if(count - 1 < 0) { count = imgArr.length - 1 } else { count += -1 } } else { if(count + 1 >= imgArr.length) { count = 0 } else { count += 1 } } img.src = imgArr[count] lis.forEach((v,i) => { lis[i].className = '' if(i == count) { lis[i].className = 'active' } }) } } left.addEventListener('click', switchImg(1)) // 上一张轮播图 right.addEventListener('click', switchImg(2)) // 下一张轮播图 // 点击底部li标签切换轮播图 lis.forEach((value,index) => { lis[index].addEventListener('click', () => { lis.forEach((v,i) => { lis[i].className = '' }) count = index img.src = imgArr[count] lis[count].className = 'active' }) }) // 创建定时器 每隔2.5s自动切换下一张轮播图 let swiper = setInterval(() => { right.click() },2500) // 鼠标移入暂停自动切换 box.onmouseenter = () => { clearInterval(swiper) } // 鼠标移出开始自动切换 box.onmouseleave = () => { swiper = setInterval(() => { right.click() },1500) }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。