移动端触摸滑动插件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 相关文章推荐
Javascript 实用小技巧
Apr 07 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 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 include的妙用,实现路径加密
2008/07/29 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
JS实现简单打字测试
2020/06/24 Javascript
Python标准库之collections包的使用教程
2017/04/27 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python能自学吗
2020/06/18 Python
python 字符串格式化的示例
2020/09/21 Python
电大物流学生的自我评价
2013/10/25 职场文书
爱情寄语大全
2014/04/09 职场文书
班级寄语大全
2014/04/10 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
学习保证书100字
2015/02/26 职场文书
看雷锋电影观后感
2015/06/10 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis