JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能
HTML部分
html部分比較簡單,這里直接上代碼
頁面中默認(rèn)顯示第一張圖片
ps.這里我找了四張圖,所以有四個li
<div class="box"> <img src="./images/1.jpg" alt=""> <!-- 圖片下方小圓點 --> <ol> <!-- 開始給第一個小圓點設(shè)置默認(rèn)active類 代表點擊選中的狀態(tài)--> <li class="active "></li> <li></li> <li></li> <li></li> </ol> </div>
CSS部分
給輪播圖盒子以及小圓點添加樣式
/* 清除頁面默認(rèn)內(nèi)外邊距 */ * { margin: 0; padding: 0; } /* 給輪播圖容器盒子設(shè)置寬高和相對定位 */ .box { position: relative; width: 382px; height: 237px; margin: 100px auto; } img { width: 100%; height: 100%; } /* 給小圓點設(shè)置絕對定位,定到圖片下方 */ ol { /* 改為彈性容器 */ display: flex; position: absolute; width: 80px; bottom: 10px; left: 50%; transform: translate(-50%, 0); list-style: none; /* 設(shè)置li的主軸對齊方式 */ justify-content: space-between; } /* 每一個小圓點設(shè)置背景黑色半透明和鼠標(biāo)樣式 */ li { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } /* 選中狀態(tài)下得小圓點樣式,改背景色為白色半透明 */ .active { background-color: rgba(255, 255, 255, 0.8); }
JavaScript部分
首先將需要展示的圖片地址存入數(shù)組
let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']
使用定時器間歇函數(shù),實現(xiàn)自動切換圖片的效果
這里代碼比較簡單,我都寫了詳細(xì)注釋
// 設(shè)置一個計數(shù)器變量 let i = 0 // setInterval(function(){},2000) 設(shè)置2000ms執(zhí)行一次 // 這里function(){}里面就是切換圖片和小圓點樣式的函數(shù) setInterval(function () { i++ // 如果切換到最后一張圖的時候,把計數(shù)器歸零 if (i > arr.length - 1) { i = 0 } // 獲取頁面中的img標(biāo)簽,注意這里頁面中只有一個img, // 所以使用querySelector,如果有多個就使用querySelectorAll // 兩者返回的值不同,前者返回的是一個對象類型,后者返回的是一個偽數(shù)組類型 let imgSet = document.querySelector('img') // 更改img標(biāo)簽的src屬性為新的地址 imgSet.src = arr[i] // 獲取所有的小圓點 let point = document.querySelectorAll('li') // 獲取所有類名為active的標(biāo)簽,并清空類名,達到恢復(fù)小圓點為默認(rèn)樣式的效果 document.querySelector('.active').className = '' // 給當(dāng)前小圓點添加active類名,設(shè)為選中狀態(tài) point[i].className = 'active' }, 2000)
最后就是事件監(jiān)聽實現(xiàn)自由切換圖片功能
// 使用getElementsByTagName找到所有的li小圓點,得到的是偽數(shù)組 let click = document.getElementsByTagName('li') // 這是for循環(huán),遍歷得到的偽數(shù)組 for (let j = 0; j < click.length; j++) { // 給當(dāng)前小圓點添加事件監(jiān)聽,監(jiān)聽鼠標(biāo)點擊效果 click[j].addEventListener('click', function () { 清除所有有active類名的類 document.querySelector('.active').className = '' // 代碼跟上面相同,就不解釋了 click[j].className = 'active' let imgSet = document.querySelector('img') imgSet.src = arr[j] // 將計數(shù)器設(shè)置為當(dāng)前圓點 i = j }) }
完整代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 清除頁面默認(rèn)內(nèi)外邊距 */ * { margin: 0; padding: 0; } /* 給輪播圖容器盒子設(shè)置寬高和相對定位 */ .box { position: relative; width: 382px; height: 237px; margin: 100px auto; } img { width: 100%; height: 100%; } /* 給小圓點設(shè)置絕對定位,定到圖片下方 */ ol { /* 改為彈性容器 */ display: flex; position: absolute; width: 80px; bottom: 10px; left: 50%; transform: translate(-50%, 0); list-style: none; /* 設(shè)置li的主軸對齊方式 */ justify-content: space-between; } /* 每一個小圓點設(shè)置背景黑色半透明和鼠標(biāo)樣式 */ li { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } /* 選中狀態(tài)下得小圓點樣式,改背景色為白色半透明 */ .active { background-color: rgba(255, 255, 255, 0.8); } </style> </head> <body> <div class="box"> <img src="./images/1.jpg" alt=""> <!-- 圖片下方小圓點 --> <ol> <li class="active "></li> <li></li> <li></li> <li></li> </ol> </div> <script> let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg'] // 設(shè)置一個計數(shù)器變量 let i = 0 // setInterval(function(){},2000) 設(shè)置2000ms執(zhí)行一次 // 這里function(){}里面就是切換圖片和小圓點樣式的函數(shù) setInterval(function () { i++ // 如果切換到最后一張圖的時候,把計數(shù)器歸零 if (i > arr.length - 1) { i = 0 } // 獲取頁面中的img標(biāo)簽,注意這里頁面中只有一個img, // 所以使用querySelector,如果有多個就使用querySelectorAll // 兩者返回的值不同,前者返回的是一個對象類型,后者返回的是一個偽數(shù)組類型 let imgSet = document.querySelector('img') // 更改img標(biāo)簽的src屬性為新的地址 imgSet.src = arr[i] // 獲取所有的小圓點 let point = document.querySelectorAll('li') // 獲取所有類名為active的標(biāo)簽,并清空類名,達到恢復(fù)小圓點為默認(rèn)樣式的效果 document.querySelector('.active').className = '' // 給當(dāng)前小圓點添加active類名,設(shè)為選中狀態(tài) point[i].className = 'active' }, 2000) // 使用getElementsByTagName找到所有的li小圓點,得到的是偽數(shù)組 let click = document.getElementsByTagName('li') // 這是for循環(huán),遍歷得到的偽數(shù)組 for (let j = 0; j < click.length; j++) { // 給當(dāng)前小圓點添加事件監(jiān)聽,監(jiān)聽鼠標(biāo)點擊效果 click[j].addEventListener('click', function () { 清除所有有active類名的類 document.querySelector('.active').className = '' // 代碼跟上面相同,就不解釋了 click[j].className = 'active' let imgSet = document.querySelector('img') imgSet.src = arr[j] // 將計數(shù)器設(shè)置為當(dāng)前圓點 i = j }) } </script> </body> </html>
總結(jié)
前面實現(xiàn)自動切換的時候還好,但是在實現(xiàn)手動切換的時候,一開始沒有弄明白querySelector和querySelectorAll返回值得區(qū)別,不知道怎么獲取到底是哪一個小圓點鼠標(biāo)單擊點擊,所以一開始使用的是笨辦法,選中每一個小圓點添加事件綁定實現(xiàn)手動切換,代碼比較冗余,最會研究了一晚上,才搞明白兩者返回的值不同,前者返回的是一個對象類型,后者返回的是一個偽數(shù)組類型,如果想更改偽數(shù)組里的屬性,必須先遍歷一下數(shù)組,使用for循環(huán)遍歷之后給每一個小圓點添加事件監(jiān)聽切換圖片和圓點樣式
效果圖
到此這篇關(guān)于JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能的文章就介紹到這了,更多相關(guān)JS實現(xiàn)輪播圖切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式:var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別,下面腳本之家小編給大家詳細(xì)介紹下js中const、var和let的區(qū)別,感興趣的朋友一起看看吧2016-10-10JavaScript實現(xiàn)簡單抽獎系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單抽獎系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03利用js來實現(xiàn)縮略語列表、文獻來源鏈接和快捷鍵列表
本文主要對利用js來實現(xiàn)縮略語列表、文獻來源鏈接和快捷鍵列表的方法進行詳細(xì)分析介紹。具有很好的參考價值,需要的朋友一起來看下吧2016-12-12html dom節(jié)點操作(獲取/修改/添加或刪除)
DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn),下面為大家介紹下html dom節(jié)點操作,感興趣的朋友可以參考下2014-01-01