原生JavaScript實現(xiàn)輪播圖效果
更新時間：2021年09月22日 08:56:42 作者：一只菜鳥㊖
這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)輪播圖效果的具體代碼，供大家參考，具體內容如下
一、功能：
1、每隔2.5s自動切換下一張輪播圖；
2、底部按鈕切換對應輪播圖；
3、鼠標移入暫停自動切換，移出開始；
4、鼠標移入，左右切換按鈕出現(xiàn)，并可左右切換輪播圖。
二、效果（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>
表現(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)建當前輪播圖下標
// 獲取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ù)組 添加對應底部切換li標簽
imgArr.forEach(() => {
let li = document.createElement('li')
ul.appendChild(li)
})
let lis = document.querySelectorAll('li') // 獲取所有l(wèi)i標簽
lis[0].className = 'active' // 給第一個li標簽添加選中狀態(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)) // 下一張輪播圖
// 點擊底部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'
})
})
// 創(chuàng)建定時器 每隔2.5s自動切換下一張輪播圖
let swiper = setInterval(() => {
right.click()
},2500)
// 鼠標移入暫停自動切換
box.onmouseenter = () => {
clearInterval(swiper)
}
// 鼠標移出開始自動切換
box.onmouseleave = () => {
swiper = setInterval(() => {
right.click()
},1500)
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現(xiàn)同一頁面多個運動效果的方法,涉及javascript操作頁面元素運動效果的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
本文為大家介紹的是使用js實現(xiàn)頁面轉發(fā)，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
TypeScript泛型參數(shù)默認類型和新的strict編譯選項
這篇文章主要介紹了TypeScript泛型參數(shù)默認類型和新的strict編譯選項，對TypeScript感興趣的同學，可以參考下2021-05-05
JavaScript?Object.defineProperty與proxy代理模式的使用詳細分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
js調用打印機打印網(wǎng)頁字體總是縮小一號的解決方法
直接調用window.print()，但是打印出來后，字體總是縮小一號,后來直接target="_blank"，就可以正常打印了，下面是實現(xiàn)代碼2014-01-01
這篇文章主要為大家詳細介紹了js實現(xiàn)跳一跳小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
Promise說起來是一個非常簡單的概念，即使你沒有機會去使用它，很有可能你也了解過它。Promise是一個非常有價值的構造器，能夠幫助你避免使用鑲套匿名方法，而使用更具有可讀性的方式組裝異步代碼。這里我們將介紹6個最簡單的特性，希望對大家有幫助2014-04-04
這篇文章主要介紹了uni-app中實現(xiàn)元素拖動效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了hammer.js實現(xiàn)圖片手勢放大效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章全面的為大家解析了bootstrap格子布局的相關資料，感興趣的朋友可以參考一下2016-05-05