下載swiper
[https://www.swiper.com.cn/usage/index.html](https://www.swiper.com.cn/usage/index.html)
參考swiper
[https://blog.csdn.net/Flynn\_curry/article/details/90237934](https://blog.csdn.net/Flynn_curry/article/details/90237934)
## 1.0頁面布局
```
<!DOCTYPE html>
<html>
<head>
<title>實用輪播圖</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./swiper.min.css">
<link rel="stylesheet" type="text/css" href="./test19.css">
<!--------- 引進自己 swiper插件------->
<script src="./swiper.min.js"></script>
</head>
<body>
<div class="lunbo-leave fluidwidth">
<div class="swiper-container swiper1-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-p1"></div>
</div>
</div>
<div class="lunbo-leave fluidwidth">
<div class="swiper-container swiper2-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div>
<div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-p2"></div>
</div>
</div>
<script type="text/javascript" src="./test19.js"></script>
</body>
</html>
```
## 2.0css樣式
/*----------------------輪播圖公共樣式層-----------------------*/
.lunbo-leave {
}
.swiper-imagesize {
max-width: 1280px;
width: 100%;
min-width: 1100px;
/*height: 700px;*/
}
.swiper-wrapper {
max-width: 1280px;
width: 100%;
min-width: 1100px;
/*height: 700px;*/
}
.swiper-pagination-bullet-active {
background-color: #A0100F;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/*------------------------輪播圖1層---------------------------*/
.swiper1-container {
max-width: 1280px;
width: 100%;
min-width: 1100px;
/*height: 700px;*/
}
/*------------------------輪播圖2層---------------------------*/
.swiper2-container {
max-width: 1280px;
width: 100%;
min-width: 1100px;
/*height: 700px;*/
}
## 3.0js布局
```
var swiper1 = new Swiper('.swiper1-container', { // 區分容器
centeredSlides: true,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-p1',
clickable: true,
},
});
var swiper2 = new Swiper('.swiper2-container', { // 區分容器
effect: 'fade',
loop: true,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-p2',
clickable: true,
},
});
```
- tp5圖片上傳
- 文件上傳到七牛云
- 上傳到阿里云
- 富文本編輯器
- phpexcel和spreadsheet
- phpexcel導出
- phpexcel導入
- spreadsheet
- tp5_api接口
- 跨域請求
- JWT
- 圖片和視頻上傳接口
- 驗證碼
- tp5小程序登錄
- tp5小程序支付
- tp5基礎架構
- 驗證層
- 模型層Model
- 控制器構找
- tp5.0支付寶
- 海報二維碼
- 輪播圖
- echarts柱狀圖
- layui的圖片彈窗
- p標簽顯示指定行數(全部)
- jquery和layerdate調用日期
- ajax發送文件和圖片的坑啊
- JS日期點擊上一天和下一天
- 百度分享js
- POST請求
- 商品數據表
- tp5.0支付寶最全
- tp5路由的坑
- 二維數組排序
- tp5模型分組group錯誤
- 二維變一維數組
- 無限樹形結構
- json對象轉數組
- 模型關聯查詢
- tp5的模型獲取器和字段設定
- 經緯度獲取距離排序