移动端触摸滑动插件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>

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

Javascript 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
如何更好的编写js async函数
May 13 Javascript
seajs下require书写约定实例分析
May 16 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 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
You might like
获取远程文件大小的php函数
2010/01/11 PHP
php生成静态页面的简单示例
2014/04/17 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
react实现同页面三级跳转路由布局
2019/09/26 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
JS实现简易计算器
2020/02/14 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Python中如何定义一个函数
2016/09/06 面试题
机关道德讲堂实施方案
2014/03/15 职场文书
离婚协议书标准格式
2014/10/04 职场文书
兴趣班停课通知
2015/04/24 职场文书
垂直极限观后感
2015/06/08 职场文书
关于军训的感想
2015/08/07 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android