最好今天分享一個(gè)使用JS制作的輪播圖效果

個(gè)人名片：
?😊作者簡(jiǎn)介：一名大一在校生，web前端開發(fā)專業(yè)
?🤡?個(gè)人主頁：幾何小超
?🐼座右銘：懶惰受到的懲罰不僅僅是自己的失敗，還有別人的成功。
?🎅**學(xué)習(xí)目標(biāo):?堅(jiān)持每一次的學(xué)習(xí)打卡，學(xué)好前端

首先是HTML部分

<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>對(duì)人類來說會(huì)不會(huì)太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div>

下一步是css部分

 * {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}

之后就是來介紹一下JS實(shí)現(xiàn)輪播圖的效果

我們都知道輪播圖點(diǎn)一下右邊的箭頭或者是左邊的箭頭就可以滾動(dòng)頁面

所以我們第一步先做右邊的箭頭

還是先聲明一個(gè)數(shù)組，里面放了圖片，和文字和背景顏色

第一步我們先獲取三個(gè)元素，toggle()是一個(gè)方法調(diào)用，我是把左邊和右邊的寫在一個(gè)方法，顯示更加美觀，，然后呢我們執(zhí)行右側(cè)按鈕業(yè)務(wù)，還是先獲取右側(cè)按鈕，然后定義一個(gè)信息量i=0

因?yàn)槲覀兊膇需要進(jìn)行i++或者是i--的操作，所以在上面等單獨(dú)定義一個(gè)i=0，記住這里不能用const，只能用let

然后注冊(cè)點(diǎn)擊事件： next.addEventListener('click', function()，

但是當(dāng)我們輪播圖到了最后一個(gè)，需要往返第一個(gè)，這時(shí)候我們需要判斷，如果到了素組下標(biāo)為8的時(shí)候，我們就得返回第一個(gè)

// 1. 初始數(shù)據(jù)const sliderData = [{ url: './images/slider01.jpg', title: '對(duì)人類來說會(huì)不會(huì)太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國(guó)文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },]//獲取元素const img=document.querySelector('.slider-wrapper img')const p=document.querySelector('.slider-footer p')const footer=document.querySelector('.slider-footer')// 1右側(cè)按鈕業(yè)務(wù)// 1.1獲取右側(cè)按鈕const next=document.querySelector('.next')let i=0// 1.2注冊(cè)點(diǎn)擊事件next.addEventListener('click', function(){i++// 1.6判斷if(i>=8){i=0}toggle()})

2.右側(cè)的點(diǎn)擊事件和左側(cè)一樣，就是需要換一下判斷依據(jù)，還要獲取的元素。前幾章我已經(jīng)說過如何來得到對(duì)應(yīng)的對(duì)象，比如圖片，文字和背景顏色還有更新的小圓點(diǎn)

// 2.左側(cè)按鈕const prev=document.querySelector('.prev')prev.addEventListener('click', function(){i--// 1.6判斷i=i<0?sliderData.length-1:itoggle()})function toggle(){
//公共部分// 1.3得到對(duì)應(yīng)的對(duì)象img.src=sliderData[i].urlp.innerHTML=sliderData[i].titlefooter.style.backgroundColor=sliderData[i].color// 1.5更換小圓點(diǎn)document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}

3，最后講一個(gè)功能，這里我們依舊是在定時(shí)器上面聲明一個(gè)變量，因?yàn)槲覀兌〞r(shí)器也是有一直在懂，所以我們來這塊設(shè)定一個(gè)點(diǎn)擊事件

然后我們加了這樣一個(gè)功能，比如鼠標(biāo)經(jīng)過盒子停止定時(shí)器，或者是離開又開始定時(shí)器的操作

通稱都用了這兩個(gè)事件

第一個(gè)是鼠標(biāo)經(jīng)過停止事件，第二個(gè)是開始事件，這樣呢我們一個(gè)完整的輪播圖就做出來了

slider.addEventListener('mouseenter', function(){

?slider.addEventListener('mouseleave', function()

// 3.自動(dòng)播放let timerId=setInterval(function(){next.click()},1000)// 4.鼠標(biāo)經(jīng)過大盒子，停止定時(shí)器const slider=document.querySelector('.slider')//注冊(cè)事件slider.addEventListener('mouseenter', function(){//停止定時(shí)器clearInterval(timerId)})// / 4.鼠標(biāo)經(jīng)過大盒子，開啟定時(shí)器//注冊(cè)事件slider.addEventListener('mouseleave', function(){//停止定時(shí)器clearInterval(timerId)timerId = setInterval(function(){next.click()},1000)})

這是源碼

<!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>輪播圖點(diǎn)擊切換</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>對(duì)人類來說會(huì)不會(huì)太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始數(shù)據(jù)const sliderData = [{ url: './images/slider01.jpg', title: '對(duì)人類來說會(huì)不會(huì)太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo廚出現(xiàn)了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國(guó)文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },]//獲取元素const img=document.querySelector('.slider-wrapper img')const p=document.querySelector('.slider-footer p')const footer=document.querySelector('.slider-footer')// 1右側(cè)按鈕業(yè)務(wù)// 1.1獲取右側(cè)按鈕const next=document.querySelector('.next')let i=0// 1.2注冊(cè)點(diǎn)擊事件next.addEventListener('click', function(){i++// 1.6判斷if(i>=8){i=0}toggle()})// 2.左側(cè)按鈕const prev=document.querySelector('.prev')prev.addEventListener('click', function(){i--// 1.6判斷i=i<0?sliderData.length-1:itoggle()})function toggle(){// 1.3得到對(duì)應(yīng)的對(duì)象img.src=sliderData[i].urlp.innerHTML=sliderData[i].titlefooter.style.backgroundColor=sliderData[i].color// 1.5更換小圓點(diǎn)document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}// 3.自動(dòng)播放let timerId=setInterval(function(){next.click()},1000)// 4.鼠標(biāo)經(jīng)過大盒子，停止定時(shí)器const slider=document.querySelector('.slider')//注冊(cè)事件slider.addEventListener('mouseenter', function(){//停止定時(shí)器clearInterval(timerId)})// / 4.鼠標(biāo)經(jīng)過大盒子，開啟定時(shí)器//注冊(cè)事件slider.addEventListener('mouseleave', function(){//停止定時(shí)器clearInterval(timerId)timerId = setInterval(function(){next.click()},1000)})</script>
</body></html>