分享一波代碼........類庫的強大我等已跪.............
代碼如下，方法詳細注釋了......
在這要提一下loop這個屬性了 ——><div class="swiper-slide Slide1">Slide 1</div>這里要在賦一個新的類名，然后loop才能正常的循環切換圖片，要不然會出bug，具體的話.....我也不是很清楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="swiper-3.4.2.min.css">
<style>
.swiper-container {
width: 700px;
height: 400px;
}
.swiper-slide{
font-size: 50px;
}
.Slide1{
background:url('img5.jpg');
background-size: 700px 400px;
}
.Slide2{
background:url('img4.jpg');
background-size: 700px 400px;
}
.Slide3{
background:url('img3.jpg');
background-size: 700px 400px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide Slide1">Slide 1</div>
<div class="swiper-slide Slide2">Slide 2</div>
<div class="swiper-slide Slide3">Slide 3</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>
</body>
<script src="swiper-3.4.2.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical',垂直方向上的鼠標點擊拖拽切換
direction: 'horizontal',//水平方向上的鼠標點擊拖拽切換
loop: true,
//自動切換的時間間隔（單位ms），不設定該參數slide不會自動切換。圖片自動播放（單位：毫秒） 2秒切換一次
autoplay : 2000,
//speed是指在鼠標拖拽結束后圖片以300毫秒滑動到運動位置
speed:300,
//用戶操作swiper之后，是否禁止autoplay。默認為true：停止。如果設置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。操作包括觸 碰，拖動，點擊pagination等。
// autoplayDisableOnInteraction : true,//用戶操作之后就不會自動切換圖片了
autoplayDisableOnInteraction : false,
//如果設置為true，當切換到最后一個slide時停止自動切換。（loop模式下無效）就是說自動切換到最后一張圖片后就不會再由自動切換圖片的效果了
autoplayStopOnLast : true,
//設定初始化時slide的索引，在刷新頁面最先看到的是圖片3
initialSlide:2,
//設置為true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。（根據瀏覽器形狀有所不同）
grabCursor : true,
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
})
</script>
</html>
