Javascript滑動效果利器--Swiper
阿新 • • 發佈：2019-01-02
swiper使用指南
使用場景
首先我們就要知道swiper這個東西能幫我們解決什麼以至於我們要去學習使用它，這是我們學習的動力。大致介紹一下場景：
1.頭部的廣告自動輪播效果；
2.移動端網頁粘附式滾動效果；
3.簡單的畫廊。
這些都可以通過swiper輕鬆實現，所以本篇文章的目的就是在學習swiper的基礎上實現這幾個效果！
基本用法
Swiper是純javascript打造的滑動特效外掛，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
以上是swiper中文網首頁的介紹，就是這麼牛逼轟轟。
第一步：要使用swiper就需要載入swiper的js和css檔案：swiper.min.js和swiper.min.css檔案。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>第二步：按照下面的結構使用swiper.min.css中的樣式裝飾你的div：
<div class="swiper-container" 第三步：初始化Swiper：寫在html內容後面或者是等頁面載入完後初始化：
//第一種方式
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進後退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滾動條
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
//第二種方式
<script type="text/javascript">
window.onload = function() {
...
}
</script>應用1：廣告自動輪播
我們遵照上面的方法可以快速地實現一個廣告輪播地效果：
<!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>SwiperDemo</title>
<link rel="stylesheet" href="./swiper-3.4.2.min.css">
<style type="text/css">
html,body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#ad_container{
height: 100px;
width: 100%;
background: #666;
}
#ad1{
background:#4390ee;
}
#ad2{
background:#ca4040;
}
#ad3{
background:#ff8604;
}
.swiper-slide{
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div id="demo">
<div id="ad_container" class="swiper-container">
<div class="swiper-wrapper">
<div id="ad1" class="swiper-slide">Slide 1</div>
<div id="ad2" class="swiper-slide">Slide 2</div>
<div id="ad3" class="swiper-slide">Slide 3</div>
</div>
</div>
</div>
<script src="./swiper-3.4.2.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
autoplay: 1000
})
</script>
</body>
</html>想要設定廣告自動切換，swiper切換等樣式，就要通過在Swiper物件例項的引數上來做文章：
initialSlide:0
direction:horizontal
speed:300
autoplay:0
autoplayDisableOnInteraction:true
autoplayStopOnLast:false
grabCursor:false
parallax:false
hashnav:false
hashnavWatchState:false
history: replaceState:false
setWrapperSize:false
virtualTranslate:false
a11y:false
width:
height:
roundLengths:false
breakpoints:
autoHeight:false
nested:false
這些屬性不做細講，自己去試。在每個swiper-slide中插入你想要的廣告圖片或者是設定div的背景都可以實現廣告效果。
應用2：粘附式滾動效果
乾脆在原來的基礎上做吧，請把網頁調整移動式，效果好一些。這樣的話我們就把輪播廣告作為我們這個網頁第一頁的子頁面，這就要用到上面nested的屬性了。
<body>
<div id="demo">
<div id="page_container" class="swiper-container">
<div class="swiper-wrapper">
<div id="page1" class="swiper-slide">
<div id="ad_container" class="swiper-container">
<div class="swiper-wrapper">
<div id="ad1" class="swiper-slide">Slide 1</div>
<div id="ad2" class="swiper-slide">Slide 2</div>
<div id="ad3" class="swiper-slide">Slide 3</div>
</div>
</div>
</div>
<div id="page2" class="swiper-slide"></div>
<div id="page3" class="swiper-slide"></div>
</div>
</div>
</div>
<script src="./swiper-3.4.2.min.js"></script>
<script>
var mySwiper = new Swiper ('#ad_container', {
direction: 'horizontal',
autoplay: 1000,
nested:true
});
var mySwiper2 = new Swiper ('#page_container', {
direction: 'vertical'
});
</script>
</body>
樣式就不寫了，主要還是看一下這個html結構，這就是巢狀最簡單直觀的結構了。
應用3：畫廊
其實畫廊也沒啥做的必要了，就是在給應用2加一個子頁面，新增一下畫廊的控制元件來控制一下照片的切換
<body>
<div id="demo">
<div id="page_container" class="swiper-container">
<div class="swiper-wrapper">
<div id="page1" class="swiper-slide">
<div id="ad_container" class="swiper-container">
<div class="swiper-wrapper">
<div id="ad1" class="swiper-slide">Slide 1</div>
<div id="ad2" class="swiper-slide">Slide 2</div>
<div id="ad3" class="swiper-slide">Slide 3</div>
</div>
</div>
</div>
<div id="page2" class="swiper-slide"></div>
<div id="page3" class="swiper-slide">
<div id="photo_container" class="swiper-container">
<div class="swiper-wrapper">
<div id="photo1" class="swiper-slide">Photo 1</div>
<div id="photo2" class="swiper-slide">Photo 2</div>
<div id="photo3" class="swiper-slide">Photo 3</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<script src="./swiper-3.4.2.min.js"></script>
<script>
var mySwiper = new Swiper ('#ad_container', {
direction: 'horizontal',
autoplay: 1000,
nested:true
});
var mySwiper2 = new Swiper ('#page_container', {
direction: 'vertical'
});
var mySwiper3 = new Swiper ('#photo_container', {
direction: 'horizontal',
nested:true,
pagination: '.swiper-pagination',
paginationClickable: true
});
</script>
</body>
想實現更多的效果，自己去查Swiper中文網的API,參見Swiper中文網，我寫了一下就發現這個外掛還是很容易上手的，但是當你真正在工作中遇到的話，會發現裡面有很多的坑，所以在學校裝裝逼，平時玩玩可以拿過來用，沒吃透這個外掛的相容性即一系列的坑，緊急的專案還是別用了，別問我怎麼知道的。