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 相关文章推荐
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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实现文章置顶功能的方法
2016/10/20 PHP
php集成开发环境详解
2019/09/24 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python Socket编程详细介绍
2017/03/23 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
聊聊Python中的pypy
2018/01/12 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
软件测试常见笔试题
2012/02/04 面试题
关于工资低的辞职信
2014/01/14 职场文书
护士实习求职信
2014/06/22 职场文书
考试作弊检讨书
2015/01/27 职场文书
大学生学年个人总结
2015/02/15 职场文书
施工员岗位职责范本
2015/04/11 职场文书
一年级语文教学随笔
2015/08/14 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
创业计划书之甜品店
2019/09/18 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python