JS中Swiper的使用和轮播图效果

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的使用和轮播图效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# js # swiper # 轮播图 # Swiper.js插件超简单实现轮播图 # JS常用插件之Swiper插件实现轮播图功能实例 # 分页 # 小编 # 加载 # 在此 # 给大家 # 所述 # 给我留言 # 官网 # 感谢大家 # 可以查看 # 滚动条 # 疑问请 # 有任何 # 图区 # size # font # external # css # style # nofollow

返回目录在线咨询

上一篇：如何提升首页的用户体验以促进SEO_SEO优化教程
下一篇：海外服务器部署指南：全球加速、安全合规与跨境优化策略

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS中Swiper的使用和轮播图效果

您的项目需求