- A+
最近做了一个网站，首页轮播图一直没有达到理想的效果，在网上找了两个实现方法，一个是用css自己实现，一个是用swiper插件，个人认为swiper做的还比较好用。这里只贴出主要的实现代码，想要看具体实现代码及效果可以到对应网址上看：
一、css实现轮播图
原文网址：https://www.jianshu.com/p/550c11f3b731
实现逻辑：
1）将所有的轮播图片放在一个容器里面，并排排列；
2）编写css动画事件：每隔一定时间向左偏移一定距离，距离为一个轮播图宽度；到最后一个轮播图后切换到第一个图片，实现无限循环
优点：
实现逻辑简单，可以直接拿来用
缺点：
轮播图数量固定，如果要增删，需要修改代码；不是一个顺序的无限循环，到达最后一个轮播图后，会有一个快速倒退的动画，效果不是太好
主要实现代码：
/*//自动播放*/ .slide .slide-auto { animation: marginLeft 10.5s infinite; }
@keyframes marginLeft { 0% { margin-left: 0; } 28.5% { margin-left: 0; } 33.3% { margin-left: -600px; } 62% { margin-left: -600px; } 66.7% { margin-left: -1200px; } 95.2% { margin-left: -1200px; } 100% { margin-left: 0; } }二、swiper插件实现方式
文档网址：https://www.swiper.com.cn/usage/index.html
实现方法：
1）下载插件文件：swiper-bundle.min.js和swiper-bundle.min.css，下载地址：https://www.swiper.com.cn/download/index.html#file1，下载文件后解压，在swiper-masterpackage目录下有这两个文件；
2）引入插件文件：
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"> </head> <body> ... <script src="dist/js/swiper-bundle.min.js"></script> ... </body> </html>
3）编写轮播html页面：
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div>
4）JS编写代码启动轮播图效果
var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, })
优点：
对轮播图数量没有限制，增删轮播图不需要修改代码；
功能可配置，自由增删轮播功能，api文档地址：https://www.swiper.com.cn/api/index.html
可以外部控制轮播图，详细可见api文档中的Methods（Swiper方法）
提供import引入方式，可应用在vue和react中。
缺点：
有学习成本，不过不高
