编程 Javascript

移动端触摸滑动插件swiper使用方法详解

Posted in Javascript onAugust 11, 2017

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 轮播图区域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实现区域的滑动
    //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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

diasa

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

表单提交时自动复制内容到剪贴板的js代码

Mar 16 Javascript

javascript操作JSON的要领总结

Dec 09 Javascript

禁止ajax缓存获取程序最新数据的方法

Nov 19 Javascript

使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

May 06 Javascript

jquery判断单选按钮radio是否选中的方法

May 05 Javascript

用javascript实现自动输出网页文本

Jul 30 Javascript

Vue.js 插件开发详解

Mar 29 Javascript

使用Vuex实现一个笔记应用的方法

Mar 13 Javascript

iview table高度动态设置方法

Mar 14 Javascript

node中modules.exports与exports导出的区别

Jun 08 Javascript

浅入深出Vue之组件使用

Jul 11 Javascript

jquery css实现流程进度条

Mar 26 jQuery

Echarts基本用法_动力节点Java学院整理

Aug 11 #Javascript

js 奇葩技巧之隐藏代码

Aug 11 #Javascript

echart简介_动力节点Java学院整理

Aug 11 #Javascript

Javascript中this关键字指向问题的测试与详解

Aug 11 #Javascript

使用JS编写的随机抽取号码的小程序

Aug 11 #Javascript

javascript简写常用的12个技巧（可以大大减少你的js代码量）

Mar 28 #Javascript

Mobile Web开发基础之四--处理手机设备的横竖屏问题

Aug 11 #Javascript