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

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

首先是HTML部分

<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>對人類來說會不會太超前了？</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實現輪播圖的效果

我們都知道輪播圖點一下右邊的箭頭或者是左邊的箭頭就可以滾動頁面

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

還是先聲明一個數組，里面放了圖片，和文字和背景顏色

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

因為我們的i需要進行i++或者是i--的操作，所以在上面等單獨定義一個i=0，記住這里不能用const，只能用let

然后注冊點擊事件： next.addEventListener('click', function()，

但是當我們輪播圖到了最后一個，需要往返第一個，這時候我們需要判斷，如果到了素組下標為8的時候，我們就得返回第一個

// 1. 初始數據const sliderData = [{ url: './images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo廚出現了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國文化', 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右側按鈕業(yè)務// 1.1獲取右側按鈕const next=document.querySelector('.next')let i=0// 1.2注冊點擊事件next.addEventListener('click', function(){i++// 1.6判斷if(i>=8){i=0}toggle()})

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

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

3，最后講一個功能，這里我們依舊是在定時器上面聲明一個變量，因為我們定時器也是有一直在懂，所以我們來這塊設定一個點擊事件

然后我們加了這樣一個功能，比如鼠標經過盒子停止定時器，或者是離開又開始定時器的操作

通稱都用了這兩個事件

第一個是鼠標經過停止事件，第二個是開始事件，這樣呢我們一個完整的輪播圖就做出來了

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

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

// 3.自動播放let timerId=setInterval(function(){next.click()},1000)// 4.鼠標經過大盒子，停止定時器const slider=document.querySelector('.slider')//注冊事件slider.addEventListener('mouseenter', function(){//停止定時器clearInterval(timerId)})// / 4.鼠標經過大盒子，開啟定時器//注冊事件slider.addEventListener('mouseleave', function(){//停止定時器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>輪播圖點擊切換</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>對人類來說會不會太超前了？</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. 初始數據const sliderData = [{ url: './images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo廚出現了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉剛：讓世界通過B站看到東方大國文化', 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右側按鈕業(yè)務// 1.1獲取右側按鈕const next=document.querySelector('.next')let i=0// 1.2注冊點擊事件next.addEventListener('click', function(){i++// 1.6判斷if(i>=8){i=0}toggle()})// 2.左側按鈕const prev=document.querySelector('.prev')prev.addEventListener('click', function(){i--// 1.6判斷i=i<0?sliderData.length-1:itoggle()})function toggle(){// 1.3得到對應的對象img.src=sliderData[i].urlp.innerHTML=sliderData[i].titlefooter.style.backgroundColor=sliderData[i].color// 1.5更換小圓點document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}// 3.自動播放let timerId=setInterval(function(){next.click()},1000)// 4.鼠標經過大盒子，停止定時器const slider=document.querySelector('.slider')//注冊事件slider.addEventListener('mouseenter', function(){//停止定時器clearInterval(timerId)})// / 4.鼠標經過大盒子，開啟定時器//注冊事件slider.addEventListener('mouseleave', function(){//停止定時器clearInterval(timerId)timerId = setInterval(function(){next.click()},1000)})</script>
</body></html>