移動端觸摸滑動插件swiper使用方法詳解

更新時間：2017年08月11日 10:58:59 作者：diasa

這篇文章主要為大家詳細介紹了移動端觸摸滑動插件swiper的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Swiper是移動端的一款非常強大的觸摸滑動插件，下面代碼只展示一些常用的配置，具體可以查看官網api

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="swiper.min.css" rel="external nofollow" >
  <style>
    /*假設設計稿是640 輪播圖區(qū)域640*300*/
    html{
      font-size:100px;
    }
    html,body{
      width:100%;
      overflow-x:hidden;
    }
    .swiper-container{
      margin:0 auto;
      height:3rem;
      overflow:hidden;
    }
    .swiper-slide{
      height:3rem;
    }
    .swiper-slide img{
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <section class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class='swiper-lazy' data-src="img/banner/banner1.jpg" alt="">
        <div class='swiper-lazy-preloader'></div>
      </div>
      <div class="swiper-slide">
        <img class='swiper-lazy' data-src="img/banner/banner2.jpg" alt="">
        <div class='swiper-lazy-preloader'></div>
      </div>
      <div class="swiper-slide">
        <img class='swiper-lazy' data-src="img/banner/banner3.jpg" alt="">
        <div class='swiper-lazy-preloader'></div>
      </div>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滾動條 -->
    <div class="swiper-scrollbar"></div>
  </section>
  <script src='swiper.min.js'></script>
  <script>
    //REM 響應式
    ~function(){
      var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN;
      document.documentElement.style.fontSize = ratio*100 + "px";
    }();

    //初始化swiper實現(xiàn)區(qū)域的滑動
    //new Swiper([container selector],[settings])
    var swiper1 = new Swiper('.swiper-container',{
      loop:true,//無縫銜接滾動
      effect:'cube',//滑動效果
      autoplay:3000,
      autoplayDisableOnInteraction:false,//用戶操作swiper之后不禁止autoplay
      pagination:'.swiper-pagination',
      paginationType:'progress',//分頁器樣式
      lazyLoading:true,//圖片延遲加載
      lazyLoadingInPrevNext:true//前一個和后一個延遲加載

    })
  </script>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

微信小程序 this.triggerEvent()的具體使用
這篇文章主要介紹了微信小程序 this.triggerEvent()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
js實現(xiàn)HTML中Select二級聯(lián)動的實例
下面小編就為大家分享一篇js實現(xiàn)HTML中Select二級聯(lián)動的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
使用JavaScript字符串解決回文數的方案詳解
這篇文章主要介紹了使用JavaScript字符串解決回文數的方案,JavaScript中的字符串是一種數據類型,用于表示文本數據,字符串可以包含任意字符序列,包括字母、數字、符號和空格,靈活掌握字符串的解決問題思想,巧用字符串解決回文數,需要的朋友可以參考下
2024-05-05
詳解uniapp分包的實現(xiàn)方式及優(yōu)點
當今移動應用開發(fā)領域,隨著用戶對于應用功能和體驗的要求不斷提高,應用程序的復雜度也在不斷增加,在這種情況下,應用程序的體積也隨之增大,為了解決這個問題,Uniapp提供了分包功能,本文將詳細介紹Uniapp分包的功能和優(yōu)勢,包括如何通過配置文件實現(xiàn)分包
2023-09-09
微信小程序實現(xiàn)時間預約功能
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)時間預約基本功能，一個類似電商的時間預約功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
JavaScript類型相關的常用操作總結
這篇文章主要給大家總結介紹了關于JavaScript類型相關的常用操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-02-02
JavaScript 自定義屬性 data-*使用介紹
Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無關的信息,讀取的時候是通過dataset對象，使用”.”來獲取屬性，需要去掉data-前綴
2023-06-06
深入淺出理解JavaScript閉包的功能與用法
這篇文章主要介紹了深入淺出理解JavaScript閉包的功能與用法,結合實例形式從變量、函數的內部屬性與作用域鏈分析了javascript閉包的相關概念、功能與使用技巧,需要的朋友可以參考下
2018-08-08
關于JavaScript中name的意義沖突示例介紹
這篇文章主要介紹了關于JavaScript中name的意義沖突,需要的朋友可以參考下
2014-05-05
three.js 入門案例詳解
本篇文章主要介紹了three.js 入門案例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01