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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue调用语音播放的方法
Sep 27 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&amp;mysql(六)
2006/10/09 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
Python Requests 基础入门
2016/04/07 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
中专生自荐信
2013/10/12 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
党员自我剖析材料
2014/08/31 职场文书
初婚初育证明范本
2014/11/24 职场文书
团员自我评价范文
2015/03/10 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书