移动端触摸滑动插件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 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
vue实现树状表格效果
Dec 29 Vue.js
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
WINXP下apache+php4+mysql
2006/11/25 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
25道Java面试题集合
2013/05/21 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
八年级生物教学反思
2014/01/22 职场文书
农民工创业典型事迹
2014/01/25 职场文书
卖车协议书
2014/04/21 职场文书
大学生在校表现评语
2014/12/31 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript