flexslider.js实现移动端轮播

效果如下：

代码如下：

body,p,a,div,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
 margin: 0;
 padding: 0;
 list-style: none;
}
body {
 font: 16px Microsoft YaHei, sans-serif;
 -webkit-tap-highlight-color: transparent;
 color: #2a2b2c;
 background: #fff;
}
*, *::before, *::after {
 outline: none;
 box-sizing: border-box;
}
a,img {
 text-decoration: none;
 display: block;
 color: #2a2b2c;
 border: 0;
}
.wrapper {
 width: 360px;
 margin: 100px auto;
}
.h1s {
 margin: 40px 10px 10px 10px;
 font: 20px Microsoft YaHei;
}


.flexslider {
 height: 180px;
 position: relative;
 background: #f5f5f5;
 overflow: hidden;
}
.flex-viewport {
 height: 100%;
}
.slides {
 height: 100%;
 position: relative;
 z-index: 1;
}
.slides li {
 height: 100%;
}
.slides li a {
 display: block;
 height: 100%;
 position: relative;
}
.flexslider li img {
 display: block;
 width: 100%;
 height: 100%;
 display: none;
}
.flex-control-nav {
 text-align: center;
 padding: 0 5px;
 position: absolute;
 right: 0;
 bottom: 3px;
 z-index: 2;
}
.flex-control-nav li {
 display: inline-block;
 width: 8px;
 height: 8px;
 margin: 0 3px;
}
.flex-control-nav a {
 display: block;
 height: 100%;
 line-height: 40px;
 overflow: hidden;
 border: 1px solid #fff;
 border-radius: 55%;
}
.flex-control-nav .flex-active {
 background: #fff;
}
.flexslider .ps1 {
 width: 100%;
 height: 25px;
 color: #fff;
 background: rgba(0,0,0,.5);
 padding: 0 50px 0 10px;
 font: 14px/27px Microsoft YaHei;
 text-align: left;
 display: block;
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 position: absolute;
 bottom: 0;
 left: 0;
}




 
  

   

    
     
     
图片标题
    
   
   

    
     
     
图片标题
    
   
   

    
     
     
图片标题
    
   
  
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！