移动端触摸滑动插件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禁止小键盘输入数字功能代码
Aug 01 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
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将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
让Python代码更快运行的5种方法
2015/06/21 Python
理解python正则表达式
2016/01/15 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python字符串常用方法
2018/06/14 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
少先队学雷锋活动月总结
2014/03/09 职场文书
党员公开承诺事项
2014/03/25 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android