一个简单实用的js插件--Swiper

swiper(swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.

• 初始化

  nbsp;html&gt;    <meta>  <title></title>  <link>  <style>  .swiper-container {  width: 600px;  height: 300px;  }           .swiper-slide{  font-size: 50px          }  .swiper-slide:nth-of-type(1){  background-color: cornflowerblue;  }  .swiper-slide:nth-of-type(2){  background-color: coral;  }  .swiper-slide:nth-of-type(3){  background-color: yellowgreen;  }  </style>      <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  <!-- 如果需要分页器 -->  <div></div>  <!-- 如果需要导航按钮 -->  <div></div>  <div></div>  <!-- 如果需要滚动条 -->  <div></div>  </div>  <!--导航等组件可以放在container之外-->  <script></script>  <script>                  var mySwiper = new Swiper (&#39;.swiper-container&#39;, {              direction: &#39;vertical&#39;,//                loop: true,//                //                // 如果需要分页器              pagination: &#39;.swiper-pagination&#39;,//                //                // 如果需要前进后退按钮              nextButton: &#39;.swiper-button-next&#39;,              prevButton: &#39;.swiper-button-prev&#39;,//                //                // 如果需要滚动条              scrollbar: &#39;.swiper-scrollbar&#39;,          })</script>  

   

• 基本配置

  var mySwiper = new Swiper ('.swiper-container', {                   // 滑动方向                  // horizontal水平                  // vertical垂直              direction: 'horizontal',              // 初始化时候slide的索引(从0开始)              initialSlide: 1,                              // 手指松开至slide贴合的时间              speed:3000,                              // 设置自动播放的事件间隔              autoplay: 2000,              // 可显示数量              slidesPerView:2,                              // 滑块居中              centeredSlides:true,          })

   

• 触摸设置

    var mySwiper = new Swiper ('.swiper-container', {              direction: 'horizontal',              // 触摸距离与slide滑动距离的比率               touchRatio:0.1,              // 无法滑动              onlyExternal:true,              // 滑块跟随手指进行移动              followFinger:false,              // 定义longSwipesMs              longSwipesMs:1000,              longSwipes:false,              shortSwipes:false,              longSwipesRatio:0.5,              touchAngle:10,          })禁止切换和前进后退  <div> <div> <div>Slide 1</div> <!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>--> <div>Slide 2</div> <div>Slide 3</div> </div> </div> <button>prev</button> <button>next</button> <script></script> <script>                 var mySwiper = new Swiper (&#39;.swiper-container&#39;, {             direction: &#39;horizontal&#39;,             noSwiping:true,             noSwipingClass : "stop",             nextButton : ".next",             prevButton : ".prev",         })       </script>分页器      <style>  .swiper-container {  width: 600px;  height: 300px;  }           .swiper-slide{  font-size: 50px          }  .swiper-slide:nth-of-type(1){  background-color: cornflowerblue;  }  .swiper-slide:nth-of-type(2){  background-color: coral;  }  .swiper-slide:nth-of-type(3){  background-color: yellowgreen;  }  .swiper-pagination-bullet{  width: 20px;  height: 20px;  }  .swiper-pagination-bullet-active{  background-color: yellow;  }  </style>      <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  <div></div>  </div>  <script></script>  <script>                  var mySwiper = new Swiper (&#39;.swiper-container&#39;, {              direction: &#39;horizontal&#39;,                              pagination : ".swiper-pagination",                              paginationType : "bullets",              paginationType : "fraction",              paginationType : "progress",                              paginationClickable : true,              paginationHide : true,              paginationElement : "i",              paginationBulletRender : function( swiper,index,classname ){                  return "<span class=&#39;"+ classname +"&#39;>"+ (index+1) +""  }          })</script>  切换效果  <script>                  var mySwiper = new Swiper (&#39;.swiper-container&#39;, {              direction: &#39;horizontal&#39;,              effect : "slide",              effect : "fade",              effect : "cube",              effect : "coverflow",              effect : "flip",          })</script>进程  <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  </div>  <button>按钮</button>  <script></script>  <script>                  var mySwiper = new Swiper (&#39;.swiper-container&#39;, {              direction: &#39;horizontal&#39;,          })          btn.onclick = function(){              alert( mySwiper.progress );              alert( mySwiper.slides[0].progress );              console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );          }          setInterval(function(){              console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );          },20)</script>  

   

• 常用属性和回调

    <div>  <div>  <div>Slide 1</div>  <div>Slide 2</div>  <div>Slide 3</div>  </div>  </div>  <button>按钮</button>  <script></script>  <script>                  var mySwiper = new Swiper (&#39;.swiper-container&#39;, {              direction: &#39;horizontal&#39;,              speed : 2000,              onSlideChangeStart : function(){                  console.log( "开始滑动" );              },              onSlideChangeEnd : function(){                  console.log( "滑动结束" );              }          })          console.log( mySwiper.width );          console.log( mySwiper.height );          btn.onclick = function(){              console.log( mySwiper.translate );              console.log( mySwiper.activeIndex );              console.log( mySwiper.previousIndex );          }        </script>