JS中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>

总结

以上所述是小编给大家介绍的JS中Swiper的使用和轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
JavaScript中操作字符串小结
May 04 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 #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
You might like
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
微信小程序实现折叠面板
2018/01/31 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
学python需要去培训机构吗
2020/07/01 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
数学检讨书1000字
2014/02/24 职场文书
出国留学担保书
2014/05/20 职场文书
模范教师事迹材料
2014/12/16 职场文书
党员违纪检讨书
2015/05/05 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL