主页 > 前端 > javascript >
来源：自学PHP网 时间：2017-08-16 13:47 作者： 阅读:次
[导读] Swiper是移动端的一款非常强大的触摸滑动插件。下面通过本文给大家分享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的使用和轮播图效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自学php网网站的支持！ |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
