今天，讓我們一起走入jQuery插件的世界！
- 首先，swiper是什麼？
swiper是一款建立在jQuery架構上專攻于輪播圖的JavaScript插件。swiper提供了一系列元件庫實作輪播效果，自帶動畫，我們隻需進行配置即可實作動态美感的輪播圖。
以往純js的輪播圖缺乏動畫效果，或者編寫太過繁瑣，企業都不使用原生的js去實作輪播圖。而swiper互動效果好，安全穩定，是一個不錯的選擇。
- 其次，在swiper中，如何實作輪播圖？
在swiper中文網：中文api - Swiper中文網下載下傳所需的swiper插件，在項目下導入兩個核心檔案：
swiper-bundle.css、swiper-bundle.js，加上jQuery庫。
在swiper中文網檢視API文檔，設定結構及其，樣式類，外加js渲染即可。
例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>swiper插件</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../css/swiper-bundle.min.css" target="_blank" rel="external nofollow" >
<style>
.swiper{
width: 500px;
height: 500px;
}
img{
height: 470px;
width: 100%;
border-radius: 7px;
}
</style>
</head>
<body>
<!--swiper輪播區域,需要起一個id以便後期js初始化-->
<div class="swiper" id="swiper1">
<!--swiper包裹器包裹輪播項目-->
<div class="swiper-wrapper">
<!--每個輪播項目下放置需要輪播的圖檔-->
<div class="swiper-slide">
<img src="../static/badaling.jpg"/>
</div>
<div class="swiper-slide">
<img src="../static/yuanmingyuan.jpg"/>
</div>
<div class="swiper-slide">
<img src="../static/mingchangchen.jpg"/>
</div>
<div class="swiper-slide">
<img src="../static/suzhouyuanlin.jpg"/>
</div>
<div class="swiper-slide">
<img src="../static/zhouzhuang.jpg"/>
</div>
</div>
<!--分頁提示-->
<div class="swiper-pagination"></div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper-bundle.min.js"></script>
</html>
<script type="text/javascript">
$(()=>{
/**
* 建立swiper對象
* 第一個參數是需要進行輪播區域選擇器,是必選的
* 第二個參數是輪播設定:
* direction(輪播切換方向[horizontal,vertical]),
* pagination(分頁符:給el參數設定選擇器)
* spped(切換速度:毫秒數)
* loop(是否循環:布爾值)
* autoplay(是否自動播放:布爾值)
* */
let swiper=new Swiper('#swiper1',{
direction:'horizontal',
pagination:{
el:'.swiper-pagination'
},
autoplay:{
delay:1000,
disableInteraction:false
},
speed:800,
grabCursor:true,
loop:true
});
});
</script>
- 最後，swiper中有什麼需要注意的地方
swiper插件畢竟是基于jQuery的，一定要先導入jQuery的js檔案。
swiper所需的樣式類不能缺少，否則不能呈現出所需的效果。
今日格言：jQuery之是以曆久彌新，是因為它深沉而又純粹。
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)