手搓一個原生的JS輪播圖，HTML部分就隨意寫了一點，重點的邏輯還是在JS中，可以實現(xiàn)自動播放banner圖片，還有按鈕點擊切換banner和底部小圓點，點擊底部小圓點可以切換banner圖等功能，先上個圖吧，是不是很豐富<`_`>
?先放JS部分的代碼吧，主要用到了點擊事件、定時器等技術。
每一步的注釋都已經(jīng)寫好了，請放心食用，如有不清楚的地方可以在評論區(qū)交流一下，如有錯誤的地方還請大佬指指點點。文章來源：http://www.zghlxwxcb.cn/news/detail-736572.html
//author：奧里給小餅干
//site：hellodajun.cn
// 初始數(shù)據(jù)
const data = [{
url: './images/banner01.jpg',
title: '我是banner01',
color: '#4e6acd'
}, {
url: './images/banner02.jpg',
title: '我是banner02',
color: '#fa8484'
}, {
url: './images/banner03.jpg',
title: '我是banner03',
color: '#ed8c03'
}]
// 準備工作：先獲取所有需要操作的元素
const next = document.querySelector('.next')
const img = document.querySelector('img')
const lis = document.querySelectorAll('ul li')
let i = 0 //下標從0開始計
//0、封裝render函數(shù)提取公共代碼
function render() {
//0.1、 更換數(shù)組中第i個banner圖
img.src = data[i].url
//0.2、 刪除已有的 active
document.querySelector('.active').classList.remove('active')
// 0.3、添加的 active
lis[i].classList.add('active')
}
// 1、按鈕的注冊點擊事件
// 1.1 右側的按鈕點擊事件->實現(xiàn)切換圖片和圓點
next.addEventListener('click', function() {
//1.2點擊之后i每次加1
i++
//1.3大于等于數(shù)組長度(3) 的時候 下標從0開始
if (i >= data.length) {
i = 0
}
//渲染頁面
render()
})
// 2、 右側的按鈕點擊事件->實現(xiàn)切換圖片和圓點
const prev = document.querySelector('.prev')
prev.addEventListener('click', function() {
//2.1、同理 每次點擊i就減1
i--
//2.2、小于0 時， 下標從最后一位下標(data.length - 1)開始
if (i < 0) {
i = data.length - 1
}
//渲染一下
render()
})
// 3、自動播放圖片->定時器 —> 自動執(zhí)行已經(jīng)寫好按鈕點擊事件
let timer = setInterval(function() {
//3.1、 自動點擊事件的方法 ！直接用就行
next.click()
}, 1000)
// 4、 鼠標經(jīng)過/離開 可以繼續(xù)/暫停 播放
const slider = document.querySelector('.slider')
//4.1 給大盒子注冊鼠標經(jīng)過事件
slider.addEventListener('mouseenter', function() {
//4.2 經(jīng)過就清除定時器
clearInterval(timer)
})
//5.1、鼠標離開事件
slider.addEventListener('mouseleave', function() {
// 5.2鼠標離開就重新開啟定時器
timer = setInterval(function() {
// 5.3 定時器中添加自動點擊按鈕
next.click()
}, 1000)
})
// 6、點擊小圓點切換圖片
// 6.1、遍歷偽數(shù)組中的每一個DOM對象(li)
for (let j = 0; j < lis.length; j++) {
// 6.2、給小圓點注冊點擊事件
lis[j].addEventListener('click', function() {
//6.3、跟i變量保持一致 點擊第j個圓點就切換到第i個banner圖
i = j
//渲染頁面
render()
})
}
//author：奧里給小餅干
//site：hellodajun.cn差不多就可以了，還要什么自行車。下面就放上CSS+JS的完整的代碼。文章來源地址http://www.zghlxwxcb.cn/news/detail-736572.html
//author：奧里給小餅干
//site：hellodajun.cn
<!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 {
position: relative;
width: 800px;
height: 320px;
margin: 0 auto;
overflow: hidden;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
display: block;
width: 100%;
height: 100%;
}
.prev {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.next {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
button {
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(231, 226, 226, 0.5);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(85, 85, 85, 0.8);
}
.slider-indicator {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
display: flex;
margin: 0;
padding: 0;
list-style: none;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: hsl(0, 47%, 96%);
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/banner01.jpg" alt="" />
</div>
<!-- 小圓點 -->
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!-- 按鈕 -->
<button class="prev"><</button>
<button class="next">></button>
</div>
<script>
//
// 初始數(shù)據(jù)
const data = [{
url: './images/banner01.jpg',
title: '我是banner01',
color: '#4e6acd'
}, {
url: './images/banner02.jpg',
title: '我是banner02',
color: '#fa8484'
}, {
url: './images/banner03.jpg',
title: '我是banner03',
color: '#ed8c03'
}]
// 準備工作：先獲取所有需要操作的元素
const next = document.querySelector('.next')
const img = document.querySelector('img')
const lis = document.querySelectorAll('ul li')
let i = 0 //下標從0開始計
//0、封裝render函數(shù)提取公共代碼
function render() {
//0.1、 更換數(shù)組中第i個banner圖
img.src = data[i].url
//0.2、 刪除已有的 active
document.querySelector('.active').classList.remove('active')
// 0.3、添加的 active
lis[i].classList.add('active')
}
// 1、按鈕的注冊點擊事件
// 1.1 右側的按鈕點擊事件->實現(xiàn)切換圖片和圓點
next.addEventListener('click', function() {
//1.2點擊之后i每次加1
i++
//1.3大于等于數(shù)組長度(3) 的時候 下標從0開始
if (i >= data.length) {
i = 0
}
//渲染頁面
render()
})
// 2、 右側的按鈕點擊事件->實現(xiàn)切換圖片和圓點
const prev = document.querySelector('.prev')
prev.addEventListener('click', function() {
//2.1、同理 每次點擊i就減1
i--
//2.2、小于0 時， 下標從最后一位下標(data.length - 1)開始
if (i < 0) {
i = data.length - 1
}
//渲染一下
render()
})
// 3、自動播放圖片->定時器 —> 自動執(zhí)行已經(jīng)寫好按鈕點擊事件
let timer = setInterval(function() {
//3.1、 自動點擊事件的方法 ！直接用就行
next.click()
}, 1000)
// 4、 鼠標經(jīng)過/離開 可以繼續(xù)/暫停 播放
const slider = document.querySelector('.slider')
//4.1 給大盒子注冊鼠標經(jīng)過事件
slider.addEventListener('mouseenter', function() {
//4.2 經(jīng)過就清除定時器
clearInterval(timer)
})
//5.1、鼠標離開事件
slider.addEventListener('mouseleave', function() {
// 5.2鼠標離開就重新開啟定時器
timer = setInterval(function() {
// 5.3 定時器中添加自動點擊按鈕
next.click()
}, 1000)
})
// 6、點擊小圓點切換圖片
// 6.1、遍歷偽數(shù)組中的每一個DOM對象(li)
for (let j = 0; j < lis.length; j++) {
// 6.2、給小圓點注冊點擊事件
lis[j].addEventListener('click', function() {
//6.3、跟i變量保持一致 點擊第j個圓點就切換到第i個banner圖
i = j
//渲染頁面
render()
})
}
</script>
</body>
</html>
//author：奧里給小餅干
//site：hellodajun.cn到了這里，關于原生JS輪播圖+自動播放+按鈕切換+鼠標經(jīng)過暫停+底部圓點切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
