1、下载Swiper插件在浏览器中输入并搜索Swiper，找到并打开Swiper.js官方网站，下载Swiper插件
2、解压下载好的Swiper压缩包，打开“dist”文件夹里面css和文件夹，把swiper.css和swiper.js复制到你的项目文件夹中。
3、引用插件swiper.css和swiper.js在HTML头部<head>中引用swiper.css，在<body>最后面引用swiper.js
4、运用HTML样式布局<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"><img src="images/adv01.png"></a> </div> <div class="swiper-slide"> <a href="#"><img src="images/adv02.png"></a> </div> <div class="swiper-slide"> <a href="#"><img src="images/adv03.png"></a> </div> <div class="swiper-slide"> <a href="#"><img src="images/adv04.png"></a> </div> </div> <div class="pagination"></div> <!--分页小圆点--></div>
5、swiper初始化在swiper.js后藜局腑载添加js样式 <script type="text/javascript">稆糨孝汶; var mySwiper = new Swiper('.banner-container',{ loop: true, //用来循环播放 pagination: '.banner-pagination', //显示焦点按钮 paginationClickable: '.banner-pagination', //焦点按钮可点击 }); </script>
6、此时，轮播图已经完成，效果如图所示
