一個簡單實用的js插件--Swiper-H5教程-PHP中文網

首頁

web前端

H5教程

一個簡單實用的js插件--Swiper

零下一度

Jun 27, 2017 am 11:02 AM

swiper

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=&#39;"+ classname +"&#39;>"+ (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的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7712

Java教學

1640

CakePHP 教程

1395

Laravel 教程

1289

PHP教程

1232

Related knowledge

h5項目怎麼運行 Apr 06, 2025 pm 12:21 PM

運行 H5 項目需要以下步驟：安裝 Web 服務器、Node.js、開發工具等必要工具。搭建開發環境，創建項目文件夾、初始化項目、編寫代碼。啟動開發服務器，使用命令行運行命令。在瀏覽器中預覽項目，輸入開發服務器 URL。發布項目，優化代碼、部署項目、設置 Web 服務器配置。

H5頁面製作究竟指什麼 Apr 06, 2025 am 07:18 AM

H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。

h5怎麼製作點擊圖標 Apr 06, 2025 pm 12:15 PM

製作 H5 點擊圖標的步驟包括：在圖像編輯軟件中準備方形源圖像。在 H5 編輯器中添加交互性，設置點擊事件。創建覆蓋整個圖標的熱點。設置點擊事件的操作，如跳轉頁面或觸發動畫。導出 H5 文檔為 HTML、CSS 和 JavaScript 文件。將導出的文件部署到網站或其他平台。

H5頁面製作適合哪些應用場景 Apr 05, 2025 pm 11:36 PM

H5（HTML5）適合應用於輕量級應用，如營銷活動頁面、產品展示頁面和企業宣傳微網站。它優勢在於跨平台性和豐富的交互性，但局限性在於復雜的交互和動畫、本地資源訪問和離線功能。

什麼是H5編程語言？ Apr 03, 2025 am 12:16 AM

H5不是獨立編程語言，而是HTML5、CSS3和JavaScript的集合，用於構建現代Web應用。 1.HTML5定義網頁結構和內容，提供新標籤和API。 2.CSS3控製樣式和佈局，引入動畫等新特性。 3.JavaScript實現動態交互，通過DOM操作和異步請求增強功能。

H5指的是什麼？探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo