Swiper实现全屏视觉差轮播

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