该代码示例展示了如何用JavaScript实现一个基本的轮播图，包括自动播放、按钮切换和小圆点导航功能。通过点击事件和定时器处理图片切换，同时在鼠标悬停时暂停播放，离开时恢复播放。此外，用户还可以通过点击底部小圆点来直接切换图片。
手搓一个原生的JS轮播图，HTML部分就随意写了一点，重点的逻辑还是在JS中，可以实现自动播放banner图片，还有按钮点击切换banner和底部小圆点，点击底部小圆点可以切换banner图等功能，先上个图吧，是不是很丰富<`_`>
先放JS部分的代码吧，主要用到了点击事件、定时器等技术。
每一步的注释都已经写好了，请放心食用，如有不清楚的地方可以在评论区交流一下，如有错误的地方还请大佬指指点点。
//author：奥里给小饼干
//site：hellodajun.cn
// 初始数据
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函数提取公共代码
function render() {
//0.1、 更换数组中第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 右侧的按钮点击事件->实现切换图片和圆点
next.addEventListener('click', function() {
//1.2点击之后i每次加1
i++
//1.3大于等于数组长度(3) 的时候 下标从0开始
if (i >= data.length) {
i = 0
}
//渲染页面
render()
})
// 2、 右侧的按钮点击事件->实现切换图片和圆点
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、自动播放图片->定时器 —> 自动执行已经写好按钮点击事件
let timer = setInterval(function() {
//3.1、 自动点击事件的方法 ！直接用就行
next.click()
}, 1000)
// 4、 鼠标经过/离开 可以继续/暂停 播放
const slider = document.querySelector('.slider')
//4.1 给大盒子注册鼠标经过事件
slider.addEventListener('mouseenter', function() {
//4.2 经过就清除定时器
clearInterval(timer)
})
//5.1、鼠标离开事件
slider.addEventListener('mouseleave', function() {
// 5.2鼠标离开就重新开启定时器
timer = setInterval(function() {
// 5.3 定时器中添加自动点击按钮
next.click()
}, 1000)
})
// 6、点击小圆点切换图片
// 6.1、遍历伪数组中的每一个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的完整的代码。
//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>
//
// 初始数据
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函数提取公共代码
function render() {
//0.1、 更换数组中第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 右侧的按钮点击事件->实现切换图片和圆点
next.addEventListener('click', function() {
//1.2点击之后i每次加1
i++
//1.3大于等于数组长度(3) 的时候 下标从0开始
if (i >= data.length) {
i = 0
}
//渲染页面
render()
})
// 2、 右侧的按钮点击事件->实现切换图片和圆点
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、自动播放图片->定时器 —> 自动执行已经写好按钮点击事件
let timer = setInterval(function() {
//3.1、 自动点击事件的方法 ！直接用就行
next.click()
}, 1000)
// 4、 鼠标经过/离开 可以继续/暂停 播放
const slider = document.querySelector('.slider')
//4.1 给大盒子注册鼠标经过事件
slider.addEventListener('mouseenter', function() {
//4.2 经过就清除定时器
clearInterval(timer)
})
//5.1、鼠标离开事件
slider.addEventListener('mouseleave', function() {
// 5.2鼠标离开就重新开启定时器
timer = setInterval(function() {
// 5.3 定时器中添加自动点击按钮
next.click()
}, 1000)
})
// 6、点击小圆点切换图片
// 6.1、遍历伪数组中的每一个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
5141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
