原生JavaScript如何實(shí)現(xiàn)輪播圖效果

這篇文章主要介紹原生JavaScript如何實(shí)現(xiàn)輪播圖效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

一、功能：

1、每隔2.5s自動(dòng)切換下一張輪播圖；

2、底部按鈕切換對(duì)應(yīng)輪播圖；

3、鼠標(biāo)移入暫停自動(dòng)切換，移出開(kāi)始；

4、鼠標(biāo)移入，左右切換按鈕出現(xiàn)，并可左右切換輪播圖。

二、效果（GIF）：

三、代碼：

結(jié)構(gòu)層（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>

表現(xiàn)層（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 // 創(chuàng)建當(dāng)前輪播圖下標(biāo)
// 獲取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')
 
// 輪播圖片數(shù)組
let imgArr = [
 './image/banner1.jpg',
 './image/banner2.jpg',
 './image/banner3.jpg',
 './image/banner4.jpg'
]
 
// 遍歷圖片數(shù)組 添加對(duì)應(yīng)底部切換li標(biāo)簽
imgArr.forEach(() => {
 let li = document.createElement('li')
 ul.appendChild(li)
})
 
let lis = document.querySelectorAll('li') // 獲取所有l(wèi)i標(biāo)簽
lis[0].className = 'active' // 給第一個(gè)li標(biāo)簽添加選中狀態(tài)
 
// 執(zhí)行切換輪播圖
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)) // 下一張輪播圖
// 點(diǎn)擊底部li標(biāo)簽切換輪播圖
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'
 })
})
// 創(chuàng)建定時(shí)器 每隔2.5s自動(dòng)切換下一張輪播圖
let swiper = setInterval(() => {
 right.click()
},2500)
// 鼠標(biāo)移入暫停自動(dòng)切換
box.onmouseenter = () => {
 clearInterval(swiper)
}
// 鼠標(biāo)移出開(kāi)始自動(dòng)切換
box.onmouseleave = () => {
 swiper = setInterval(() => {
  right.click()
 },1500)
}

以上是“原生JavaScript如何實(shí)現(xiàn)輪播圖效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！