swiper.js插件实现图片滚动效果

swiper.js插件实现图片滚动效果

1、页面初始化效果：

2、Html如下

  
  
  
      
      
    
    
    
    
      
    
    
    
    
  
  
    
样式选择
    
    
  
        
  
            
  
            
 
            
 
        
    
        
  
        
  
    
  
    下一步    
  
  
  

3、css如下

 body{
    background-color: #f5f5f5;
}

.paScreenTxt{
    font-family: 微软雅黑;
    font-size:2vh;
    color:#7bbbda;
    letter-spacing: 4px;
    margin-left: 3.5vh;
    margin-top: 3vh;
    font-weight: 700;
}

.checkIcon{
    z-index: 2;
    position: absolute;
    width: 6%;
    right: 6%;
    top: 10%;

}

.swiper-container{
    width: 96%;
}

.swiper-wrapper{
    text-align: center;
}

.swiper_img{
    width:100%;
}

4、js如下

$(function(){
	var mySwiper = new Swiper(".swiper-container",{  
            direction:"horizontal",/*横向滑动*/  
            loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/    
            prevButton:".swiper-button-prev",/*前进按钮*/  
            nextButton:".swiper-button-next",/*后退按钮*/   
        });
});