這篇文章主要介紹了如何用原生javascript實現輪播圖，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
使用原生js實現輪播圖
使用原生JS實現輪播圖的案例，靜態效果圖如下：
核心思想
將一些圖片在一行中平鋪，然后計算偏移量再利用定時器實現定時輪播。
步驟：
1. 首先搭建基本的HTML結構
<!-- 結構部分 --><!-- 結構說明：外層一個container盒子，用于放圖片盒子（imgBox）、左箭頭、右箭頭、底部小圓圈， 圖片盒子中放的是輪播的圖片 --> <p class="container"> <!-- 注意：此處強調一下，圖片盒子imgBox的left屬性必須寫成行內樣式，否則js中拿不到left的值 --> <p class="imgBox" style="left: -500px;"> <img src="./images/lunbo1.jpg" alt="輪播圖1"> <img src="./images/lunbo2.jpg" alt="輪播圖2"> <img src="./images/lunbo3.jpg" alt="輪播圖3"> <img src="./images/lunbo4.jpg" alt="輪播圖4"> <img src="./images/lunbo5.jpg" alt="輪播圖5"> </p> <a href="javascript:;" class="leftArrow" style="display: none;"> <img src="./images/leftArrow.png" alt="左箭頭"> </a> <a href="javascript:;" class="rightArrow" style="display: none;"> <img src="./images/rightArrow.png" alt="右箭頭"> </a> <ul class="circleFather"> <li class="select"></li> <li></li> <li></li> <li></li> <li></li> </ul> </p>
2. 樣式部分
使用絕對定位把左右箭頭和底部小圓圈放在合適的位置。外層容器盒子的寬度等于一張圖片的寬度，圖片盒子的寬度為所有圖片寬度之和，所有圖片左浮動，實現水平排列。
☆☆☆注意：此處強調一下，圖片盒子imgBox的left屬性必須寫成行內樣式，否則js中拿不到left的值
<style>
/* 內聯樣式表 */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* 外層容器樣式 */
.container {
height: 330px;
width: 500px; //外層容器盒子的寬度等于一張圖片的寬度
margin: 100px auto;
position: relative;
overflow: hidden; //超出隱藏
}
/* 左右箭頭樣式 */
.container .leftArrow,
.container .rightArrow {
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 1;
}
.container .leftArrow {
left: 5px;
}
.container .rightArrow {
right: 5px;
}
/* 圖片盒子樣式 */
.imgBox {
position: absolute;
transition: all 0.5s;
height: 333px;
width: 3500px; //圖片盒子的寬度為所有圖片寬度之和
}
.imgBox img {
height: 330px;
width: 500px;
float: left; //所有圖片左浮動，實現水平排列
}
/* 底部小圓圈樣式 */
.circleFather {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
}
.circleFather li {
float: left;
height: 10px;
width: 10px;
margin: 0 5px;
border: 2px solid #e7641c;
border-radius: 50%;
}
.select {
background-color: #e7641c;
}
</style>3. js邏輯部分
3.1 首先實現點擊左右箭頭向左右滑動的功能
var container = document.querySelector('.container') //獲取外層容器盒子
var imgBox = document.querySelector('.imgBox') //獲取圖片盒子
var leftArrow = document.querySelector('.leftArrow') //獲取左箭頭
var rightArrow = document.querySelector('.rightArrow') //獲取右箭頭
//給左箭頭綁定點擊事件
leftArrow.onclick = function() {
goLast()
}
//右箭頭點擊事件
rightArrow.onclick = function() {
goNext()
}
// 顯示上一張圖片
// 1.點一次左箭頭，就讓left值-500，點一次右箭頭，就讓left值+500
// 2.但是有兩種特殊情況，（1）當前展示圖片1時，點擊左箭頭則需展示圖片5，（2）當前展示圖片5時，點擊右箭頭則需展示圖片1
function goLast() {
let newBoxLeft if (imgBox.style.left === '0px') {
newBoxLeft = -2000
} else {
// imgBox.style.left是一個字符串，所以要轉化為數字才能進行計算，而設定left時就要加上px成為一個字符串
newBoxLeft = parseInt(imgBox.style.left) + 500;
}
imgBox.style.left = newBoxLeft + "px"
}
// 顯示下一張圖片
function goNext() {
let newBoxLeft if (imgBox.style.left === '-2000px') {
newBoxLeft = 0
} else {
newBoxLeft = parseInt(imgBox.style.left) - 500;
}
imgBox.style.left = newBoxLeft + "px"
}此時效果圖如下：
在定時器中每1500毫秒調用一次goNext方法，實現自動切換圖片
// 使用setInterval()定時器實現自動切換功能
var timer function autoChange() {
timer = setInterval(goNext, 1500)
}
autoChange() // 監聽鼠標移入事件和移出事件，實現鼠標懸停在圖片上時，停止自動切換，停留在當前圖片,
// 鼠標移出時繼續自動切換
container.addEventListener('mouseenter', function() {
clearInterval(timer)
})
container.addEventListener('mouseleave', autoChange)此處補充一個小插曲：
一開始我監聽的是mouseout事件，但是在測試時發現鼠標移出container盒子時會多次觸發mouseout事件，導致多次調用autoChange函數，開啟了多個定時器，出現圖片切換混亂的情況，查了一下mouseout事件和mouseleave事件的區別：
mouseover和mouseout在父元素和其子元素都可以觸發，當鼠標穿過一個元素時，觸發次數得依子元素數量而言。
mouseenter和mouseleave只在父元素觸發，當鼠標穿過一個元素時，只會觸發一次。
mouseover和mouseout比mouseenter和mouseleave先觸發
簡單來說就是：
mouseout在所選區域內，從父元素到子元素也算移出觸發。
mouseleave，在所選區域，不管有沒有子元素，移出才會觸發。
實現原理：可以根據imgBox的left值，推算出第幾個小圓圈被選中，絕對值就是小圓圈的索引值，放張圖幫助理解（字有點丑，請忽略，嘻嘻。。）
在goLast()函數和goNext()函數中就可以計算/計算出被選中小圓圈的索引
var index = 0 // 定義index變量，表示第幾個小圓圈被選中
function goLast() {
let newBoxLeft if (imgBox.style.left === '0px') {
newBoxLeft = -2000
} else {
// imgBox.style.left是一個字符串，所以要轉化為數字才能進行計算，而設定left時就要加上px成為一個字符串
newBoxLeft = parseInt(imgBox.style.left) + 500;
}
imgBox.style.left = newBoxLeft + "px"
index = Math.abs(newBoxLeft / 500) //計算出被選中小圓圈的索引
}
function goNext() {
let newBoxLeft if (imgBox.style.left === '-2000px') {
newBoxLeft = 0
} else {
newBoxLeft = parseInt(imgBox.style.left) - 500;
}
imgBox.style.left = newBoxLeft + "px"
index = Math.abs(newBoxLeft / 500) ///計算出被選中小圓圈的索引
}完成3.2、3.3和3.4之后的效果圖如下：
// 實現點擊底部某個小圓圈時切換成對應的圖片
(function clickCircle() {
let circleArr = document.getElementsByTagName('li')
for (let j = 0; j < circleArr.length; j++) {
circleArr[j].addEventListener('click', () => {
index = j selectCircle()
imgBox.style.left = -(index * 500) + "px"
})
}
})() //函數自調用寫法，格式：(函數)()效果圖如下：
到此為止，輪播圖的功能都實現了，但是作為一個強迫癥，發現自動切換的時候，顯示左右箭頭并不好看，所以再做一點小小的調整。
//給左右箭頭默認隱藏<a href="javascript:;" class="leftArrow" style="display: none;"> <img src="./images/leftArrow.png" alt="左箭頭"></a><a href="javascript:;" class="rightArrow" style="display: none;"> <img src="./images/rightArrow.png" alt="右箭頭"></a>
在監聽鼠標事件中，改為以下代碼
// 監聽鼠標移入事件和移出事件，實現鼠標懸停在圖片上時，停止自動切換，停留在當前圖片,鼠標移出時繼續自動切換
container.addEventListener('mouseenter', function() {
clearInterval(timer)
leftArrow.style.display = "inline"
rightArrow.style.display = "inline"
})
container.addEventListener('mouseleave', function() {
autoChange()
leftArrow.style.display = "none"
rightArrow.style.display = "none"
})效果圖：
到這就結束了。
下面是完整代碼。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生js實現輪播圖——小肉包</title>
<style>
/* 內聯樣式表 */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* 外層容器樣式 */
.container {
height: 330px;
width: 500px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
/* 左右箭頭樣式 */
.container .leftArrow,
.container .rightArrow {
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 1;
width: 32px;
height: 32px;
}
.container .leftArrow {
left: 5px;
}
.container .rightArrow {
right: 5px;
}
/* 圖片盒子樣式 */
.imgBox {
position: absolute;
/* transition: all 0.5s; */
height: 333px;
width: 3500px;
}
.imgBox img {
height: 330px;
width: 500px;
float: left;
}
/* 底部小圓圈樣式 */
.circleFather {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, 0);
}
.circleFather li {
float: left;
height: 10px;
width: 10px;
margin: 0 5px;
border: 2px solid #e7641c;
border-radius: 50%;
}
.select {
background-color: #e7641c;
}
</style></head><body>
<!-- 結構部分 -->
<!-- 結構說明：外層一個container盒子，用于放圖片盒子（imgBox）、左箭頭、右箭頭、底部小圓圈，
圖片盒子中放的是輪播的圖片 -->
<p class="container">
<!-- 注意：此處強調一下，圖片盒子imgBox的left屬性必須寫成行內樣式，否則js中拿不到left的值 -->
<p class="imgBox" style="left: 0px;">
<!-- <img src="./images/lunbo5.jpg" alt="輪播圖5"> -->
<img src="./images/lunbo1.jpg" alt="輪播圖1">
<img src="./images/lunbo2.jpg" alt="輪播圖2">
<img src="./images/lunbo3.jpg" alt="輪播圖3">
<img src="./images/lunbo4.jpg" alt="輪播圖4">
<img src="./images/lunbo5.jpg" alt="輪播圖5">
<!-- <img src="./images/lunbo1.jpg" alt="輪播圖1"> -->
</p>
<a href="javascript:;" class="leftArrow" style="display: none;">
<img src="./images/leftArrow.png" alt="左箭頭">
</a>
<a href="javascript:;" class="rightArrow" style="display: none;">
<img src="./images/rightArrow.png" alt="右箭頭">
</a>
<ul class="circleFather">
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</p>
<!-- JavaScript部分 -->
<script type="text/javascript">
var container = document.querySelector('.container') //獲取外層容器盒子
var imgBox = document.querySelector('.imgBox') //獲取圖片盒子
var leftArrow = document.querySelector('.leftArrow') //獲取左箭頭
var rightArrow = document.querySelector('.rightArrow') //獲取右箭頭
var index = 0 // 定義index變量，表示第幾個小圓圈被選中
//給左箭頭綁定點擊事件
leftArrow.onclick = function() {
goLast()
}
//右箭頭點擊事件
rightArrow.onclick = function() {
goNext()
}
// 顯示上一張圖片
// 1.點一次左箭頭，就讓left值-500，點一次右箭頭，就讓left值+500
// 2.但是有兩種特殊情況，（1）當前展示圖片1時，點擊左箭頭則需展示圖片5，（2）當前展示圖片5時，點擊右箭頭則需展示圖片1
function goLast() {
let newBoxLeft if (imgBox.style.left === '0px') {
newBoxLeft = -2000
} else {
// imgBox.style.left是一個字符串，所以要轉化為數字才能進行計算，而設定left時就要加上px成為一個字符串
newBoxLeft = parseInt(imgBox.style.left) + 500;
}
imgBox.style.left = newBoxLeft + "px"
index = Math.abs(newBoxLeft / 500) //計算第幾個小圓圈被選中
selectCircle()
}
// 顯示下一張圖片
function goNext() {
let newBoxLeft if (imgBox.style.left === '-2000px') {
newBoxLeft = 0
} else {
newBoxLeft = parseInt(imgBox.style.left) - 500;
}
imgBox.style.left = newBoxLeft + "px"
index = Math.abs(newBoxLeft / 500)
selectCircle()
}
// 使用setInterval()定時器實現自動切換功能
function autoChange() {
timer = setInterval(goNext, 1500)
}
autoChange()
// 監聽鼠標移入事件和移出事件，實現鼠標懸停在圖片上時，停止自動切換，停留在當前圖片,鼠標移出時繼續自動切換
container.addEventListener('mouseenter', function() {
clearInterval(timer)
leftArrow.style.display = "inline"
rightArrow.style.display = "inline"
})
container.addEventListener('mouseleave', function() {
autoChange()
leftArrow.style.display = "none"
rightArrow.style.display = "none"
})
//實現底部小圓圈跟隨圖片同步切換
function selectCircle() {
//獲取所有的小圓圈偽數組
let circleArr = document.getElementsByTagName('li')
for (let i = 0; i < circleArr.length; i++) {
circleArr[i].className = ""
}
circleArr[index].className = 'select'
}
// 實現點擊底部某個小圓圈時切換成對應的圖片
(function clickCircle() {
let circleArr = document.getElementsByTagName('li')
for (let j = 0; j < circleArr.length; j++) {
circleArr[j].addEventListener('click', () => {
index = j selectCircle()
imgBox.style.left = -(index * 500) + "px"
})
}
})() //函數自調用寫法，格式：(函數)()
</script></body></html>感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何用原生javascript實現輪播圖”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
