JS使用定時(shí)器與事件監(jiān)聽實(shí)現(xiàn)輪播圖切換功能
HTML部分
html部分比較簡單,這里直接上代碼
頁面中默認(rèn)顯示第一張圖片
ps.這里我找了四張圖,所以有四個(gè)li
<div class="box"> <img src="./images/1.jpg" alt=""> <!-- 圖片下方小圓點(diǎn) --> <ol> <!-- 開始給第一個(gè)小圓點(diǎn)設(shè)置默認(rèn)active類 代表點(diǎn)擊選中的狀態(tài)--> <li class="active "></li> <li></li> <li></li> <li></li> </ol> </div>
CSS部分
給輪播圖盒子以及小圓點(diǎn)添加樣式
/* 清除頁面默認(rèn)內(nèi)外邊距 */ * { margin: 0; padding: 0; } /* 給輪播圖容器盒子設(shè)置寬高和相對定位 */ .box { position: relative; width: 382px; height: 237px; margin: 100px auto; } img { width: 100%; height: 100%; } /* 給小圓點(diǎn)設(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; } /* 每一個(gè)小圓點(diǎn)設(shè)置背景黑色半透明和鼠標(biāo)樣式 */ li { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } /* 選中狀態(tài)下得小圓點(diǎn)樣式,改背景色為白色半透明 */ .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í)器間歇函數(shù),實(shí)現(xiàn)自動(dòng)切換圖片的效果
這里代碼比較簡單,我都寫了詳細(xì)注釋
// 設(shè)置一個(gè)計(jì)數(shù)器變量 let i = 0 // setInterval(function(){},2000) 設(shè)置2000ms執(zhí)行一次 // 這里function(){}里面就是切換圖片和小圓點(diǎn)樣式的函數(shù) setInterval(function () { i++ // 如果切換到最后一張圖的時(shí)候,把計(jì)數(shù)器歸零 if (i > arr.length - 1) { i = 0 } // 獲取頁面中的img標(biāo)簽,注意這里頁面中只有一個(gè)img, // 所以使用querySelector,如果有多個(gè)就使用querySelectorAll // 兩者返回的值不同,前者返回的是一個(gè)對象類型,后者返回的是一個(gè)偽數(shù)組類型 let imgSet = document.querySelector('img') // 更改img標(biāo)簽的src屬性為新的地址 imgSet.src = arr[i] // 獲取所有的小圓點(diǎn) let point = document.querySelectorAll('li') // 獲取所有類名為active的標(biāo)簽,并清空類名,達(dá)到恢復(fù)小圓點(diǎn)為默認(rèn)樣式的效果 document.querySelector('.active').className = '' // 給當(dāng)前小圓點(diǎn)添加active類名,設(shè)為選中狀態(tài) point[i].className = 'active' }, 2000)
最后就是事件監(jiān)聽實(shí)現(xiàn)自由切換圖片功能
// 使用getElementsByTagName找到所有的li小圓點(diǎn),得到的是偽數(shù)組 let click = document.getElementsByTagName('li') // 這是for循環(huán),遍歷得到的偽數(shù)組 for (let j = 0; j < click.length; j++) { // 給當(dāng)前小圓點(diǎn)添加事件監(jiān)聽,監(jiān)聽鼠標(biāo)點(diǎn)擊效果 click[j].addEventListener('click', function () { 清除所有有active類名的類 document.querySelector('.active').className = '' // 代碼跟上面相同,就不解釋了 click[j].className = 'active' let imgSet = document.querySelector('img') imgSet.src = arr[j] // 將計(jì)數(shù)器設(shè)置為當(dāng)前圓點(diǎn) 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%; } /* 給小圓點(diǎn)設(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; } /* 每一個(gè)小圓點(diǎn)設(shè)置背景黑色半透明和鼠標(biāo)樣式 */ li { width: 15px; height: 15px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } /* 選中狀態(tài)下得小圓點(diǎn)樣式,改背景色為白色半透明 */ .active { background-color: rgba(255, 255, 255, 0.8); } </style> </head> <body> <div class="box"> <img src="./images/1.jpg" alt=""> <!-- 圖片下方小圓點(diǎn) --> <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è)置一個(gè)計(jì)數(shù)器變量 let i = 0 // setInterval(function(){},2000) 設(shè)置2000ms執(zhí)行一次 // 這里function(){}里面就是切換圖片和小圓點(diǎn)樣式的函數(shù) setInterval(function () { i++ // 如果切換到最后一張圖的時(shí)候,把計(jì)數(shù)器歸零 if (i > arr.length - 1) { i = 0 } // 獲取頁面中的img標(biāo)簽,注意這里頁面中只有一個(gè)img, // 所以使用querySelector,如果有多個(gè)就使用querySelectorAll // 兩者返回的值不同,前者返回的是一個(gè)對象類型,后者返回的是一個(gè)偽數(shù)組類型 let imgSet = document.querySelector('img') // 更改img標(biāo)簽的src屬性為新的地址 imgSet.src = arr[i] // 獲取所有的小圓點(diǎn) let point = document.querySelectorAll('li') // 獲取所有類名為active的標(biāo)簽,并清空類名,達(dá)到恢復(fù)小圓點(diǎn)為默認(rèn)樣式的效果 document.querySelector('.active').className = '' // 給當(dāng)前小圓點(diǎn)添加active類名,設(shè)為選中狀態(tài) point[i].className = 'active' }, 2000) // 使用getElementsByTagName找到所有的li小圓點(diǎn),得到的是偽數(shù)組 let click = document.getElementsByTagName('li') // 這是for循環(huán),遍歷得到的偽數(shù)組 for (let j = 0; j < click.length; j++) { // 給當(dāng)前小圓點(diǎn)添加事件監(jiān)聽,監(jiān)聽鼠標(biāo)點(diǎn)擊效果 click[j].addEventListener('click', function () { 清除所有有active類名的類 document.querySelector('.active').className = '' // 代碼跟上面相同,就不解釋了 click[j].className = 'active' let imgSet = document.querySelector('img') imgSet.src = arr[j] // 將計(jì)數(shù)器設(shè)置為當(dāng)前圓點(diǎn) i = j }) } </script> </body> </html>
總結(jié)
前面實(shí)現(xiàn)自動(dòng)切換的時(shí)候還好,但是在實(shí)現(xiàn)手動(dòng)切換的時(shí)候,一開始沒有弄明白querySelector和querySelectorAll返回值得區(qū)別,不知道怎么獲取到底是哪一個(gè)小圓點(diǎn)鼠標(biāo)單擊點(diǎn)擊,所以一開始使用的是笨辦法,選中每一個(gè)小圓點(diǎn)添加事件綁定實(shí)現(xiàn)手動(dòng)切換,代碼比較冗余,最會(huì)研究了一晚上,才搞明白兩者返回的值不同,前者返回的是一個(gè)對象類型,后者返回的是一個(gè)偽數(shù)組類型,如果想更改偽數(shù)組里的屬性,必須先遍歷一下數(shù)組,使用for循環(huán)遍歷之后給每一個(gè)小圓點(diǎn)添加事件監(jiān)聽切換圖片和圓點(diǎn)樣式
效果圖
到此這篇關(guān)于JS使用定時(shí)器與事件監(jiān)聽實(shí)現(xiàn)輪播圖切換功能的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)輪播圖切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)輪播圖的完整代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡單代碼
- JS實(shí)現(xiàn)輪播圖效果的3種簡單方法
- js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- 使用html+js+css 實(shí)現(xiàn)頁面輪播圖效果(實(shí)例講解)
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- 原生js實(shí)現(xiàn)無限循環(huán)輪播圖效果
相關(guān)文章
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式:var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別,下面腳本之家小編給大家詳細(xì)介紹下js中const、var和let的區(qū)別,感興趣的朋友一起看看吧2016-10-10基于JavaScript實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-1120行代碼實(shí)現(xiàn)的一個(gè)CSS覆蓋率測試腳本
這里我們只求CSS規(guī)則的覆蓋率,所以訪問 querySelectorAll().length 即可。通過排序就可看出各個(gè)CSS使用情況2013-07-07JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03利用js來實(shí)現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表
本文主要對利用js來實(shí)現(xiàn)縮略語列表、文獻(xiàn)來源鏈接和快捷鍵列表的方法進(jìn)行詳細(xì)分析介紹。具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12html dom節(jié)點(diǎn)操作(獲取/修改/添加或刪除)
DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn),下面為大家介紹下html dom節(jié)點(diǎn)操作,感興趣的朋友可以參考下2014-01-01