Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架，非常受到青睐，这里演示swiper在pc端全屏视觉轮播的效果，这也是pc端常用的一种特性

一  以教师节为主题的一个全屏轮播

　　1 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件以及jquery-1.11.3.min.js官网都有（可以下载完整的压缩文件）

        2  .HTML内容

    //四张图片轮播 这里说一下全屏轮播的思想，首先，全屏轮播有两种方式来显示图片

     1  使用img标签：使用img属性如果想让图片能够全屏展示，同时图片内容居中，我们需要设置width：100%，但是这样设置会使得你的图片等比的压缩，有时候达不到我们想要的效果，

         你也可以采取定位来放置图片，但是在不同浏览器之间有些许瑕疵，（很多网站都是用过img属性来设置，也可以采纳）

    2  使用background属性：这是我常用的一个方法，分享给大家，我们将要展示的图片设置为背景图片，（很多网站的图片都是链接，因此放在a中）设置属性a{display：block；height：‘图片高度’)

        同时在标签中加入 style=" background: url(xxx) no-repeat center "样式，就能使得图片满屏并且内容居中，可以通过下面代码看一下

 

    

       

            

                

                              
                    
                
                

                          
                    
                
                

                    
                    
                
                

                    
                    
                
                

      
    
    

    
    
    

    

    
//可以修改一下按钮样式，这里不细说，见上一节

4.初始化Swiper

二 视觉差效果（其实这个很简单，在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) 

透明度变化

    视觉差演示代码（直接在上面全屏轮播进行的修改）//script中将视觉差开启设置为true，同时在内容中加入data-swiper-parallax="xxx"(xxx一般为负值）

 

    

       

            

                

                    
                        

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
                

                    
                        
//值为-200
                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 //加入内容体现视觉差
                    
                
                

                    
                       

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
                

                    
                     

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
      

 

完整代码：

    
    
    
    
      
      
     
     


    

       

            

                

                    
                        

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
                

                    
                        

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
                

                    
                       

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
                

                    
                     

                              We are like lambs in a field, disporting themselves under the eye of the butcher,

                           who chooses out first one and then another for his prey. So it is that in our good 

                           days we are all unconscious of the evil Fate may have presently in store for us — sickness, poverty,

                           mutilation, loss of sight or reason
                        
 
                    
                
                

      
    
    

    
    
    

    

    
    


//图片地址http://show.huitu.com/pic/20180904/r38905.jpg

 

 

 

转载于:https://www.cnblogs.com/qianqian-it/p/9593389.html