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

2020-11-27 来源：尚佳旅游分享网

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的使用和轮播图效果