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

目录

前言

一、轮播图是什么？

二、实现方法

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]}})

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

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

 

2.使用组件来快速实现

实现轮播图效果，除以上方法外，其实还有很多方法。而在这些方法中，最方便快速的可以说就是使用组件了。比如说 swiper ，vant-ui 等组件，用这些组件就可以快速的实现轮播图，至于具体如何来使用组件，那就要看组件的官方文档了。

只不过要提一嘴的是，虽然有组件来帮助我们快速实现一些效果，但终究还是要会自己手动实现的，这样才能更好的提高自身能力。

---

总结

以上就是今天要讲的内容，本文简单介绍了一些实现轮播图效果的方法，可以得出结论，轮播图并不难实现。最后，希望本文能对您有所帮助。