前文
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>
效果
