前端小案例——轮播图（HTML+CSS+JS, 附源码）

写过一篇 · 2024-12-19 04:54:48

一、前言

实现功能：

表现多张图片，每张图片占据轮播图容器的一部分空间。
实现向左和向右的切换按钮，可以点击按钮切换到上一张或下一张图片。
在底部表现小圆点，表现当前表现的图片，点击小圆点可以跳转到对应的图片。

实现逻辑：

起首，利用querySelectorAll方法获取所有的轮播项元素，并将其生存在items变量中。
定义一个全局变量current，用于记录当前表现的轮播项的索引，默认为0。通过操作current变量来控制表现的轮播项。并通过调用干系函数来更新表现和样式
定义showSlide函数，用于表现当前的轮播项。通过遍历所有轮播项，设置其transform属性来实现水平滑动效果。同时，调用updateDots函数更新小圆点的样式。
定义prevSlide函数，用于切换到上一张轮播项。如果current大于0，则将current减1；否则，将current设置为末了一张轮播项的索引。然后，调用showSlide函数表现对应的轮播项。
定义nextSlide函数，用于切换到下一张轮播项。如果current小于轮播项的数量减1，则将current加1；否则，将current设置为0。然后，调用showSlide函数表现对应的轮播项。
利用setInterval方法定义一个定时器timer，每隔3秒主动调用一次nextSlide函数，实现主动播放功能。
定义pauseTimer函数，用于停息定时器。通过调用clearInterval方法，扫除定时器timer。
定义resumeTimer函数，用于恢复定时器。重新设置定时器timer，调用nextSlide函数实现轮播功能。
添加鼠标悬停和离开事件监听器，当鼠标悬停在轮播图上时，调用pauseTimer函数停息主动播放；当鼠标离开时，调用resumeTimer函数恢复主动播放。
利用querySelectorAll方法获取所有的小圆点元素，并将其生存在dots变量中。
定义updateDots函数，用于更新小圆点的样式。遍历所有小圆点元素，移除它们的active类名，然后根据current变量为当前轮播项对应的小圆点添加active类名。
定义jumpToSlide函数，用于跳转到指定的轮播项。将current变量设置为指定轮播项的索引，然后调用showSlide和updateDots函数，表现对应的轮播项并更新小圆点的样式。

二、项目运行效果

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-repeat: no-repeat;
}
.carousel {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner {
display: flex;
width: 100%;
transition: transform 0.6s ease-in-out;
}
.item {
flex: 0 0 100%;
height: 55vh;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 80px;
z-index: 10;
cursor: pointer;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
.dots {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.dots > li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
cursor: pointer;
background-color: rgba(0,0,0,0);
border: 1px solid #fff;
border-radius: 10px;
}
.dots .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #fff;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<div class="carousel-inner">
<div class="item">
<img src="1.png" style="background-color: pink;">
</div>
<div class="item">
<img src="2.png" style="background-color: bisque;">
</div>
<div class="item">
<img src="3.jpg" style="background-color: rgb(144, 255, 236);">
</div>
<div class="item">
<img src="4.jpg" style="background-color: rgb(248, 99, 124);">
</div>
<div class="item">
<img src="5.jpg" style="background-color: rgb(210, 161, 250);">
</div>
</div>
<div class="carousel-control left" onclick="prevSlide()">&lsaquo;</div>
<div class="carousel-control right" onclick="nextSlide()">&rsaquo;</div>
<div class="dots">
<li class="active" onclick="jumpToSlide(0)"></li>
<li onclick="jumpToSlide(1)"></li>
<li onclick="jumpToSlide(2)"></li>
<li onclick="jumpToSlide(3)"></li>
<li onclick="jumpToSlide(4)"></li>
</div>
</div>
</body>
<script>
let items = document.querySelectorAll('.item');
let current = 0;
function showSlide() {
items.forEach(item => {
item.style.transform = `translateX(-${current * 100}%)`;
});
updateDots();
}
function prevSlide() {
if (current > 0) {
current--;
} else {
current = items.length - 1;
}
showSlide();
}
function nextSlide() {
if (current < items.length - 1) {
current++;
} else {
current = 0;
}
showSlide();
}
let timer = setInterval(nextSlide, 3000);
function pauseTimer() {
clearInterval(timer);
}
function resumeTimer() {
timer = setInterval(nextSlide, 3000);
}
document.getElementById('carousel').addEventListener('mouseover', pauseTimer);
document.getElementById('carousel').addEventListener('mouseout', resumeTimer);
let dots = document.querySelectorAll('.dots li');
function updateDots() {
dots.forEach(dot => {
dot.classList.remove('active');
});
dots[current].classList.add('active');
}
function jumpToSlide(index) {
current = index;
showSlide();
updateDots();
}
</script>
</html>

复制代码

四、答疑解惑

这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和图片，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。
还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主VX：18884281851

谢谢各位的支持~~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

前端小案例——轮播图（HTML+CSS+JS, 附源码）

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块