关于swiper图片切换有很多类型，我就不一一介绍了，可以直接到官网查询，今天来写一个适配于页面正中间的图片切换，也同时适配于任何图片的大小（也就是这个图片切换不用限制图片的本身大小，特别是移动端动态获取的图片有可能大小不一致），所以无论任何图片若是都想让其一直处于移动页面的正中间的话，那么就要获取到图片的tstyle样式了，好了，不多说，来看代码，既然是swiper的图片切换，那么先要引入swiper的css和js：

这两个不可少，要写入</head>的上面，接下来看简单的css实现

我直接写成内嵌式的css了，然后来看swiper的布局：

     
     
    
      
        
       
            
        
                
                         
         
                    
          
图片一
                    
          
                
         
            
        
        
       
        
       
            
        
                
                         
         
                    
          
图片二
                    
          
                
         
            
        
        
       
        
       
            
        
                
                         
         
                    
          
图片三
                    
          
                
         
            
        
        
       
        
       
            
        
                
                         
         
                    
          
图片一
                    
          
                
         
            
        
        
       
    
      
    
          
      
     

接下来就是swiper的必须要写的js效果：

好了，这样简单的写一下，效果就会出现，来看简单的实现图：

想要实现这个小例子的话，几个核心点就是：

 1、要适配各种手机，所以要知道每个的页面的scrollheight；

 2、图片大小不同的情况下，还要计算的出每张图片的高度，然后让其定位在页面的正中央。

这只是一个简单的小例子，但是移动端很有可能会用的到，希望对大家有帮助！