当前位置：首页 > news >正文

前端：轮播图常见的几种实现方式

news 2025/7/29 12:09:06

目录

前言

一、轮播图是什么？

二、实现方法

1.使用纯 HTML、CSS、JavaScript 实现

2.使用组件来快速实现

总结

前言

在学习前端的过程中，总是有要实现轮播图效果的时候，本文就介绍了轮播图常见的几种实现方式。

一、轮播图是什么？

轮播图是在首页上展示信息的一种方式，为了让用户不用滚动屏幕就能看到更多内容，可以利用轮播图来最大化信息密度。

二、实现方法

1.使用纯 HTML、CSS、JavaScript 实现

HTML代码如下：

<div class="carousel"><img src="./assets/banner1.png" alt=""><span class="pre">&lt;</span><span class="next">&gt;</span>
</div>

CSS代码如下：

    * {padding: 0;margin: 0;}/* 轮播图 */.carousel {position: relative;margin: 100px auto;width: 1240px;height: 500px;}/* 左右切换箭头 */.pre,.next {position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 40px;background-color: rgba(0, 0, 0, 0.3);text-align: center;line-height: 40px;color: #fff;opacity: 0;transition: all 0.3s;cursor: pointer;}.pre {left: 0;border-radius: 0 20px 20px 0;}.next {right: 0;border-radius: 20px 0 0 20px;}.carousel:hover .pre,.carousel:hover .next {opacity: 1;}

JS代码如下：

    /*** 轮播图实现的基本流程* 1.数据准备 --- 遍历数组来实现轮播效果* 2.获取对象* 3.自动播放 --- 用定时器实现* 4.当鼠标悬停在轮播图上面时，停止自动轮播 --- 销毁定时器* 5.当鼠标离开时，开始自动轮播 --- 重新开启定时器* 6.点击左右箭头时，进行图片的切换 --- 用事件委托来实现*/// 1.数据准备 --- 遍历数组来实现轮播效果const imageUrls = ['./assets/banner1.png', './assets/banner2.png', './assets/banner3.png', './assets/banner4.png', './assets/banner5.png']let i = 0// 2.获取对象const carousel = document.querySelector('.carousel')const img = document.querySelector('img')// 3.自动播放 --- 用定时器实现let timer = setInterval(() => {i += 1i %= 5img.src = imageUrls[i]}, 3000);// 4.当鼠标悬停在轮播图上面时，停止自动轮播 --- 销毁定时器carousel.addEventListener('mouseenter', () => {clearInterval(timer)})// 5.当鼠标离开时，开始自动轮播 --- 重新开启定时器carousel.addEventListener('mouseleave', () => {timer = setInterval(() => {i += 1i %= 5img.src = imageUrls[i]}, 3000);})// 6.点击左右箭头时，进行图片的切换 --- 用事件委托来实现carousel.addEventListener('click', (e) => {// 判断所点击的是左箭头，还是右箭头if (e.target.classList.contains('pre')) {i += 4i %= 5img.src = imageUrls[i]}if (e.target.classList.contains('next')) {i += 1i %= 5img.src = imageUrls[i]}})

在以上代码中，首先是准备好了结构和样式，并且数据是存在数组里的，这样方便后续做图片的自动播放以及手动切换。

自动播放主要是用定时器来实现，手动切换则是运用了事件委托，具体流程也在上面的代码中进行了比较清晰的注释，有兴趣的话可以看一下。