前端开发：用CSS+JS实现简单轮播图及关键代码解析
你有没有思考过，为何差不多每个网站首页都存在轮播图呢？是由于它能够在有限的空间之内展现多个内容，进而提升页面的利用率。然而众多的开发者所制作出的轮播图，要么出现卡顿的情况，要么交互体验不佳。今日所分享的这个小型轮播图，尽管代码简易，可是却解决了自动播放、悬停暂停、点击切换这几个关键的痛点。
从零搭建轮播图结构
放置轮播图的HTML结构实际上总共就三层，最对外的那层容器把控着整体的尺寸，处于中间位置的滑动层承担着图片进行移动的职责，而位于内部的每一个slide放置的是单张的图片。这样的一种结构设计是非常巧妙的，当对外层设置了overflow: hidden之后，不管滑动层怎样进行移动，最终呈现出来的都仅仅是一张图片所占据的范围。
针对750px宽、400px高的轮播图这种情况，外层容器直接去设置此尺寸，滑动层宽度即是所有图片宽度的总和，像三张图的话那便是2250px，每个slide分别设置左浮动或者inline - block，如此便能让它们进行横向排列，图片借助img标签来引入，要记得设置宽高为100%。
用CSS让滑动更流畅
在于滑动效果这件事，是轮播图的精髓所在。给滑动容器添加transition属性，图片切换看起来顺滑不突兀，这是由于0.3秒的过渡时间所达成的。很多人做轮播图时出现卡顿现象，常常是因为遗漏了这个过渡效果。
图片适配属于关键要点之一 ，运用object-fit: cover可使不同比例图片完美填充容器 ，不会出现变形情况且不会留白。倘若图片比例与容器不一致 ，该属性会自动裁剪多余部分 ，保证始终填满显示区域。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单轮播图title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.carousel-container {
width: 750px;
height: 400px;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1);
}
.carousel-slides {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.carousel-slide {
min-width: 100%;
height: 100%;
position: relative;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
style>
head>
<body>
<div class="carousel-container">
<div class="carousel-slides" id="carousel-slides">
<div class="carousel-slide">
<img src="https://picsum.photos/id/29/750/400" alt="雪山耸立">
div>
<div class="carousel-slide">
<img src="https://picsum.photos/id/10/750/400" alt="林中小湖">
div>
<div class="carousel-slide">
<img src="https://picsum.photos/id/28/750/400" alt="山中峡谷">
div>
div>
div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slidesContainer = document.getElementById('carousel-slides');
const slides = document.querySelectorAll('.carousel-slide');
let currentIndex = 0; // 用于记录当前显示的图片索引
const slideCount = slides.length; // 获取图片总数
let autoplayInterval; // 存储自动播放的定时器 ID
let isPlaying = true; // 标记当前轮播图是否处于自动播放状态
const autoplayDuration = 3000; // 3秒切换一次
// 更新轮播位置
function updateCarousel() {
slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
}
// 下一张
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
updateCarousel();
}
// 开始自动播放
function startAutoplay() {
autoplayInterval = setInterval(nextSlide, autoplayDuration);
isPlaying = true;
}
// 停止自动播放
function stopAutoplay() {
clearInterval(autoplayInterval);
isPlaying = false;
}
// 点击轮播图切换到下一张
slidesContainer.addEventListener('click', (e) => {
stopAutoplay();
nextSlide();
setTimeout(startAutoplay, autoplayDuration);
});
// 鼠标悬停暂停自动播放
const carouselContainer = document.querySelector('.carousel-container');
carouselContainer.addEventListener('mouseenter', stopAutoplay);
carouselContainer.addEventListener('mouseleave', startAutoplay);
// 初始化
updateCarousel();
startAutoplay();
});
script>
body>
html>
JS核心实现自动播放
轮播图的 JS 逻辑实际上是紧紧围绕着这样一个核心动作展开的，即改变滑动容器的 left 值或者 transform 属性，每张图片的宽度是 750px，要是想看第二张图片，那就得把容器朝着左边移动 750px 的距离，通过变量来记录当下的索引，每次进行切换的时候去计算位移的距离。
用setInterval来实现自动播放，每3秒就调用一回切换函数。这儿存在一个细节：当切换至最后一张图的时候，要运用取余运算使得索引变为零。比如说图片的总数是3，当前的索引是2，而下一张则计算(2 + 1)%3 = 0，如此便完美地达成了循环。
<div class="carousel-container">
<div class="carousel-slides" id="carousel-slides">
<div class="carousel-slide">
<img src="https://picsum.photos/id/29/750/400" alt="雪山耸立">
div>
<div class="carousel-slide">
<img src="https://picsum.photos/id/10/750/400" alt="林中小湖">
div>
<div class="carousel-slide">
<img src="https://picsum.photos/id/28/750/400" alt="山中峡谷">
div>
div>
div>
点击切换的交互设计
在进行操作时，当点击轮播图从而切换到下一张，此功能表面看上去好像较为简单，然而却需要留意定时器可能产生的干扰。于点击事件当中，把切换函数先行调用，接着让原有定时器被清除，再重新启动计时。采取这样的做法能够防止在点击之后过快地又出现自动切换的情况，进而会给用户预留较为充实的观看当前图片的时间。
实际进行开发之际，还得要考虑快速点击这一情况。连续且快速地点击，会致使出现多次切换，能够采用一个标志位来实施节流操作。每一次进行切换之时，首先要判断是不是正处于切换过程当中，如果是，那就忽略此次点击，在切换完成之后，要再次将标志位进行重置。
鼠标悬停暂停播放
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.carousel-container {
width: 750px;
height: 400px;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1);
}
.carousel-slides {
display: flex;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.carousel-slide {
min-width: 100%;
height: 100%;
position: relative;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
style>
在用户将鼠标放置于轮播图之上的时候暂停自动播放，当鼠标移开之后恢复自动播放，这种做法是提升体验的标准方式。使用mouseenter和mouseleave事件进行监听，当鼠标进入的时候通过clearInterval清除定时器，当鼠标离开的时候重新设置setInterval，以此来实现。
离去恢复之际需留意定时器是否已然存在，可先行清除间隔再重新予以设定，以保证不会生成多个定时器致使切换速率加快，与此同时记录当下索引，恢复播放之时从停下的那张图片接着播放。
性能优化和扩展思考
小尺寸的轮播图借助位移来进行切换，体现出简单且直接的特点，然而要是图片的数量相当多，那么所有图片同时进行加载的话，将会对性能产生影响，这种情况之下，能够思考只去加载前后的两张图片，其余的图片采用懒加载的方式，又或者运用左右按钮来操控切换，并且增添指示点用以显示当前图片所处的位置。
<script>
document.addEventListener('DOMContentLoaded', function() {
const slidesContainer = document.getElementById('carousel-slides');
const slides = document.querySelectorAll('.carousel-slide');
let currentIndex = 0; // 用于记录当前显示的图片索引
const slideCount = slides.length; // 获取图片总数
let autoplayInterval; // 存储自动播放的定时器 ID
let isPlaying = true; // 标记当前轮播图是否处于自动播放状态
const autoplayDuration = 3000; // 3秒切换一次
// 更新轮播位置
function updateCarousel() {
slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
}
// 下一张
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
updateCarousel();
}
// 开始自动播放
function startAutoplay() {
autoplayInterval = setInterval(nextSlide, autoplayDuration);
isPlaying = true;
}
// 停止自动播放
function stopAutoplay() {
clearInterval(autoplayInterval);
isPlaying = false;
}
// 点击轮播图切换到下一张
slidesContainer.addEventListener('click', (e) => {
stopAutoplay();
nextSlide();
setTimeout(startAutoplay, autoplayDuration);
});
// 鼠标悬停暂停自动播放
const carouselContainer = document.querySelector('.carousel-container');
carouselContainer.addEventListener('mouseenter', stopAutoplay);
carouselContainer.addEventListener('mouseleave', startAutoplay);
// 初始化
updateCarousel();
startAutoplay();
});
script>
在展开移动端适配工作时，同样需要予以考虑，毕竟就手机操作习惯而言，触摸滑动相较于点击而言，乃是更为契合的一种方式。针对此状况，需对touch事件加以监听，与此同时，借助滑动的距离来判定是否实施切换操作，实际上，达成这一目标，操作过程并非复杂难懂。值得一提的是，眼前这款基础型的小轮播图，其扩展性相当强大有力，无论想要增添哪类功能，均可轻易达成，便利性十分突出。
观摩完这般简易轮播图的达成，你认为于实际项目里，自动轮播的间隔时段予以几秒最为恰当？3秒会不会显得过快，5秒又是否会偏长？欢迎在评论区域分享你的看法，点赞转发促使更多人瞧见这个实用的轮播图教程。
