分享一波代碼........類(lèi)庫(kù)的強(qiáng)大我等已跪.............
代碼如下辫继，方法詳細(xì)注釋了......
在這要提一下loop這個(gè)屬性了 ——><div class="swiper-slide Slide1">Slide 1</div>這里要在賦一個(gè)新的類(lèi)名，然后loop才能正常的循環(huán)切換圖片诱咏，要不然會(huì)出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',垂直方向上的鼠標(biāo)點(diǎn)擊拖拽切換
direction: 'horizontal',//水平方向上的鼠標(biāo)點(diǎn)擊拖拽切換
loop: true,
//自動(dòng)切換的時(shí)間間隔（單位ms）既绕，不設(shè)定該參數(shù)slide不會(huì)自動(dòng)切換。圖片自動(dòng)播放（單位：毫秒） 2秒切換一次
autoplay : 2000,
//speed是指在鼠標(biāo)拖拽結(jié)束后圖片以300毫秒滑動(dòng)到運(yùn)動(dòng)位置
speed:300,
//用戶操作swiper之后涮坐，是否禁止autoplay凄贩。默認(rèn)為true：停止。如果設(shè)置為false袱讹，用戶操作swiper之后自動(dòng)切換不會(huì)停止疲扎，每次都會(huì)重新啟動(dòng)autoplay。操作包括觸 碰捷雕，拖動(dòng)椒丧，點(diǎn)擊pagination等。
// autoplayDisableOnInteraction : true,//用戶操作之后就不會(huì)自動(dòng)切換圖片了
autoplayDisableOnInteraction : false,
//如果設(shè)置為true救巷，當(dāng)切換到最后一個(gè)slide時(shí)停止自動(dòng)切換壶熏。（loop模式下無(wú)效）就是說(shuō)自動(dòng)切換到最后一張圖片后就不會(huì)再由自動(dòng)切換圖片的效果了
autoplayStopOnLast : true,
//設(shè)定初始化時(shí)slide的索引，在刷新頁(yè)面最先看到的是圖片3
initialSlide:2,
//設(shè)置為true時(shí)浦译，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀棒假，拖動(dòng)時(shí)指針會(huì)變成抓手形狀。（根據(jù)瀏覽器形狀有所不同）
grabCursor : true,
// 如果需要分頁(yè)器
pagination: '.swiper-pagination',
// 如果需要前進(jìn)后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動(dòng)條
scrollbar: '.swiper-scrollbar',
})
</script>
</html>
