您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

原生JavaScript实现轮播图效果

51自学网 2022-05-02 21:30:45
  javascript

本文实例为大家分享了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)}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


Vue登录功能实现
原生JS实现图片轮播 JS实现小广告插件
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1