前文
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
归根到此，Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！
官方API文档：https://www.swiper.com.cn/api/index.html
官方资源下载：https://www.swiper.com.cn/download/index.html
引入资源
<link href="dist/css/swiper.min.css" rel="stylesheet"> <!-- 注意，必须强制添加rel节点，不然不能正常使用 --> <script src="dist/js/swiper.min.js"></script>
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="dis/css/swiper.min.css" rel="stylesheet"> <!----> <style> /* 设置轮播组件的高宽 */ .swiper-container { width:1500px; height: 420px; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/one.png"></div> <div class="swiper-slide"><img src="images/two.png"></div> <div class="swiper-slide"><img src="images/three.png"></div> <div class="swiper-slide"><img src="images/four.png"></div> <div class="swiper-slide"><img src="images/five.png"></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> <script src="dis/js/swiper.min.js"></script> <script src="dis/js/jquery-1.11.3.min.js"></script> <script> $(function(){ var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 水平切换选项, loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 // scrollbar: { // el: '.swiper-scrollbar', // }, //自动播放 autoplay: { autoplay:true,//自动播放 delay:3000, //自动切换的时间间隔，单位ms disableOnInteraction :false //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 }, on:{ autoplayStart:function(){ console.log('开启自动切换'); }, autoplayStop:function(){ console.log('关闭自动切换'); } } }) }) </script> </body> </html>
效果
