<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Document</title>
<link rel=
"stylesheet"
href=
"swiper.min.css"
rel=
"external nofollow"
>
<style>
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"
>
<img
class
='swiper-lazy' src=
"img/banner/banner1.jpg"
alt=
""
>
<p
class
='swiper-lazy-preloader'></p>
</p>
<p
class
=
"swiper-slide"
>
<img
class
='swiper-lazy' src=
"img/banner/banner2.jpg"
alt=
""
>
<p
class
='swiper-lazy-preloader'></p>
</p>
<p
class
=
"swiper-slide"
>
<img
class
='swiper-lazy' src=
"img/banner/banner3.jpg"
alt=
""
>
<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>
~
function
(){
var
desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN;
document.documentElement.style.fontSize = ratio*100 +
"px"
;
}();
var
swiper1 =
new
Swiper('.swiper-container',{
loop:true,
effect:'cube',
autoplay:3000,
autoplayDisableOnInteraction:false,
pagination:'.swiper-pagination',
paginationType:'progress',
lazyLoading:true,
lazyLoadingInPrevNext:true
})
</script>
</body>
</html>