原生JavaScript如何实现轮播图效果

这篇文章主要介绍原生JavaScript如何实现轮播图效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一、功能：

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

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

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

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

二、效果（GIF）：

三、代码：

结构层（HTML）

表现层（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)}

以上是"原生JavaScript如何实现轮播图效果"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！