一个简单实用的js插件

前端开发教程 2025-01-13 0

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

初始化

<!DOCTYPE html><html>
  <head>  <meta charset=UTF-8>  <title></title>  <link rel=stylesheet type=text/css href=swiper.css?1.1.11/>  <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>
  </head>
  <body>  <div class=swiper-container>  <div class=swiper-wrapper>  <div class=swiper-slide>Slide 1</div>  <div class=swiper-slide>Slide 2</div>  <div class=swiper-slide>Slide 3</div>  </div>  <!-- 如果需要分页器 -->  <div class=swiper-pagination></div>  <!-- 如果需要导航按钮 -->  <div class=swiper-button-prev></div>  <div class=swiper-button-next></div>  <!-- 如果需要滚动条 -->  <div class=swiper-scrollbar></div>  </div>  <!--导航等组件可以放在container之外-->  <script src=swiper.js?1.1.11></script>  <script>        
          var mySwiper = new Swiper ('.swiper-container', {
              direction: 'vertical',//                loop: true,//                //                // 如果需要分页器              pagination: '.swiper-pagination',//                //                // 如果需要前进后退按钮              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',//                //                // 如果需要滚动条              scrollbar: '.swiper-scrollbar',
          })</script>
  </body></html>

基本配置

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,
          })
禁止切换和前进后退 <body> <div class=swiper-container> <div class=swiper-wrapper> <div class=swiper-slide stop>Slide 1</div> <!--<div class=swiper-slide swiper-no-swiping>Slide 2</div>--> <div class=swiper-slide>Slide 2</div> <div class=swiper-slide>Slide 3</div> </div> </div> <button class=prev>prev</button> <button class=next>next</button> <script src=swiper.js?1.1.11></script> <script>        
         var mySwiper = new Swiper ('.swiper-container', {
             direction: 'horizontal',
             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>
  </head>
  <body>  <div class=swiper-container>  <div class=swiper-wrapper>  <div class=swiper-slide>Slide 1</div>  <div class=swiper-slide>Slide 2</div>  <div class=swiper-slide>Slide 3</div>  </div>  <div class=swiper-pagination></div>  </div>  <script src=swiper.js?1.1.11></script>  <script>        
          var mySwiper = new Swiper ('.swiper-container', {
              direction: 'horizontal',                
              pagination : ".swiper-pagination",                
              paginationType : "bullets",
              paginationType : "fraction",
              paginationType : "progress",                
              paginationClickable : true,
              paginationHide : true,
              paginationElement : "i",
              paginationBulletRender : function( swiper,index,classname ){                  return "<span class='+ classname +'>"+ (index+1) +"</span>"  }
          })</script>
  </body>切换效果  <script>        
          var mySwiper = new Swiper ('.swiper-container', {
              direction: 'horizontal',

              effect : "slide",
              effect : "fade",
              effect : "cube",
              effect : "coverflow",
              effect : "flip",
          })</script>进程<body>  <div class=swiper-container>  <div class=swiper-wrapper>  <div class=swiper-slide>Slide 1</div>  <div class=swiper-slide>Slide 2</div>  <div class=swiper-slide>Slide 3</div>  </div>  </div>  <button id=btn>按钮</button>  <script src=swiper.js?1.1.11></script>  <script>        
          var mySwiper = new Swiper ('.swiper-container', {
              direction: 'horizontal',

          })

          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>
  </body>

常用属性和回调

<body>  <div class=swiper-container>  <div class=swiper-wrapper>  <div class=swiper-slide>Slide 1</div>  <div class=swiper-slide>Slide 2</div>  <div class=swiper-slide>Slide 3</div>  </div>  </div>  <button id=btn>按钮</button>  <script src=swiper.js?1.1.11></script>  <script>        
          var mySwiper = new Swiper ('.swiper-container', {
              direction: 'horizontal',

              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>
  </body>

以上就是一个简单实用的js插件–Swiper的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。