JS中Swiper的用法介绍-js教程-PHP中文网

JS中Swiper的用法介绍

巴扎黑

发布： 2017-08-12 16:04:32

原创

2971人浏览过

swiper是移动端的一款非常强大的触摸滑动插件。下面通过本文给大家分享js中swiper的使用和轮播图效果，感兴趣的的朋友一起看看吧

Swiper是移动端的一款非常强大的触摸滑动插件，下面代码只展示一些常用的配置，具体可以查看官网api

睿拓智能网站系统-网上商城

睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产

查看详情

<!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">
    <p class="swiper-wrapper">
      <p class="swiper-slide">
        @@##@@
        <p class='swiper-lazy-preloader'></p>
      </p>
      <p class="swiper-slide">
        @@##@@
        <p class='swiper-lazy-preloader'></p>
      </p>
      <p class="swiper-slide">
        @@##@@
        <p class='swiper-lazy-preloader'></p>
      </p>
    </p>
    <!-- 如果需要分页器 -->
    <p class="swiper-pagination"></p>    
    <!-- 如果需要导航按钮 -->
    <p class="swiper-button-prev"></p>
    <p class="swiper-button-next"></p>   
    <!-- 如果需要滚动条 -->
    <p class="swiper-scrollbar"></p>
  </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>

登录后复制