Swiper實現全屏視覺差輪播
阿新 • • 發佈：2018-09-05
簡單 ini shee cal 背景圖 reason 教師節 http tor
Swiper作為當代流行的js框架，非常受到青睞，這裏演示swiper在pc端全屏視覺輪播的效果，這也是pc端常用的一種特性
一 以教師節為主題的一個全屏輪播
1 首先加載插件，需要用到的文件有swiper.min.js和swiper.min.css文件以及jquery-1.11.3.min.js官網都有（可以下載完整的壓縮文件）
<link rel="stylesheet" href="css/swiper.min.css" > <script src="js/jquery-1.11.3.min.js"></script> <script src="js/swiper.min.js"></script>
2 .HTML內容
//四張圖片輪播 這裏說一下全屏輪播的思想，首先，全屏輪播有兩種方式來顯示圖片
1 使用img標簽：使用img屬性如果想讓圖片能夠全屏展示，同時圖片內容居中，我們需要設置width：100%，但是這樣設置會使得你的圖片等比的壓縮，有時候達不到我們想要的效果，
你也可以采取定位來放置圖片，但是在不同瀏覽器之間有些許瑕疵，（很多網站都是用過img屬性來設置，也可以采納）
2 使用background屬性：這是我常用的一個方法，分享給大家，我們將要展示的圖片設置為背景圖片，（很多網站的圖片都是鏈接，因此放在a中）設置屬性a{display：block；height：‘圖片高度’)
同時在標簽中加入 style=" background: url(xxx) no-repeat center "樣式，就能使得圖片滿屏並且內容居中，可以通過下面代碼看一下
<div class="banner"> <div class="swiper-container myswiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#" style=" background: url(image/2.jpg) no-repeat center "> </a> </div> <div class="swiper-slide" style=" background: url(image/4.jpg) no-repeat center "> <a href="#"> </a> </div> <div class="swiper-slide" style=" background: url(image/2.jpg) no-repeat center "> <a href="#"> </a> </div> <div class="swiper-slide" style=" background: url(image/4.jpg) no-repeat center "> <a href="#"> </a> </div> </div> <!-- 如果需要分頁器 --> <div class="swiper-pagination"></div> <!-- 如果需要導航按鈕 --> <div class="swiper-button-prev mySwiperBut"></div> <div class="swiper-button-next mySwiperBut"></div> </div>//可以修改一下按鈕樣式，這裏不細說，見上一節
4.初始化Swiper
<script>
var mySwiper = new Swiper (‘.swiper-container‘, {
// direction: ‘vertical‘,//默認水平
loop: true,
autoplay:true,
effect:"fade",//淡入淡出效果
parallax:"true",//產生視覺差
// 如果需要分頁器
pagination: {
el: ‘.swiper-pagination‘,
clickable: true,
clickableClass : ‘my-pagination-clickable‘,
},
// 如果需要前進後退按鈕
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘,
},
})
</script>
二 視覺差效果（其實這個很簡單，在API文檔中介紹了）
parallax
設置為true開啟視差效果。
效果可以應用於container或slide的子元素。當應用於container的子元素（常用於視差背景圖），每次切換時視差效果僅有設定值的slide個數-1分之1
1.視差位移變化
在所需要的元素上增加data-swiper-parallax屬性（與Swiper切換方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）
data-swiper-parallax接受兩種類型的參數。
number（單位：px），如-300，從右邊300px進入左邊出去。
percentage（百分比），移動距離=該元素寬度 * percentage。
2.視差透明度變化
在所需要的元素上增加data-swiper-parallax-opacity屬性。可選值0-1，如0.5，從半透明進入半透明出去
3.視差縮放變化
在所需要的元素上增加data-swiper-parallax-scale屬性。可選值如0.5，從一半大小進入一半大小出去
還可通過data-swiper-parallax-duration設定視差動畫持續時間（ms）。默認值是Swiper的speed，與切換時間同步。
*設定透明度或縮放必須同時設定位移，否則無效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度變化</div>
視覺差演示代碼（直接在上面全屏輪播進行的修改）//script中將視覺差開啟設置為true，同時在內容中加入data-swiper-parallax="xxx"(xxx一般為負值）
<div class="banner">
<div class="swiper-container myswiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" style=" background: url(image/2.jpg) no-repeat center ">
<div class="text" data-swiper-parallax="-100">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
<div class="swiper-slide" style=" background: url(image/4.jpg) no-repeat center ">
<a href="#">
<div class="text" data-swiper-parallax="-200">//值為-200
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div> //加入內容體現視覺差
</a>
</div>
<div class="swiper-slide" style=" background: url(image/2.jpg) no-repeat center ">
<a href="#">
<div class="text" data-swiper-parallax="-300">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
<div class="swiper-slide" style=" background: url(image/4.jpg) no-repeat center ">
<a href="#">
<div class="text" data-swiper-parallax="-400">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
</div>
完整代碼：
<!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>實現全屏的視覺差效果輪播</title>
<link rel="stylesheet" href="css/swiper.min.css" >
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/swiper.min.js"></script>
<style>
*{
margin:0px;
padding:0px;
}
.banner{
margin-top:40px;
}
.swiper-slide a{
display: block;
height: 500px;
overflow: hidden;
text-decoration: none;
}
.text{
color: #000;
font-size: 20px;
position: absolute;
left: 10%;
top:50%;
}
</style>
</head>
<body>
<div class="banner">
<div class="swiper-container myswiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#" style=" background: url(image/2.jpg) no-repeat center ">
<div class="text" data-swiper-parallax="-100">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
<div class="swiper-slide" style=" background: url(image/4.jpg) no-repeat center ">
<a href="#">
<div class="text" data-swiper-parallax="-200">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
<div class="swiper-slide" style=" background: url(image/2.jpg) no-repeat center ">
<a href="#">
<div class="text" data-swiper-parallax="-300">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
<div class="swiper-slide" style=" background: url(image/4.jpg) no-repeat center ">
<a href="#">
<div class="text" data-swiper-parallax="-400">
We are like lambs in a field, disporting themselves under the eye of the butcher,<br/>
who chooses out first one and then another for his prey. So it is that in our good <br/>
days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,<br/>
mutilation, loss of sight or reason
</div>
</a>
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev mySwiperBut"></div>
<div class="swiper-button-next mySwiperBut"></div>
</div>
<script>
var mySwiper = new Swiper (‘.swiper-container‘, {
// direction: ‘vertical‘,
loop: true,
autoplay:true,
effect:"fade",
parallax:"true",
// 如果需要分頁器
pagination: {
el: ‘.swiper-pagination‘,
clickable: true,
clickableClass : ‘my-pagination-clickable‘,
},
// 如果需要前進後退按鈕
navigation: {
nextEl: ‘.swiper-button-next‘,
prevEl: ‘.swiper-button-prev‘,
},
})
</script>
</body>
</html>
//圖片地址http://show.huitu.com/pic/20180904/r38905.jpg
Swiper實現全屏視覺差輪播