使用js模块Swiper做多图片自动滚动
官网：https://swiperjs.com/swiper-api
官网例子：https://swiperjs.com/demos#autoplay
实际使用：
<!DOCTYPEhtml>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<!–全屏显示–>
<meta name=”apple-mobile-web-app-status-bar-style” content=”blank”>
<!–隐藏状态栏–>
<meta name=”format-detection” content=” telephone=no”>
<!–关闭iphone给数字添加链接的功能–>
<title>测试</title>
<meta http-equiv=”Cache-Control” content=”no-transform”>
<meta http-equiv=”Cache-Control” content=”no-siteapp”>
<link rel=”stylesheet” type=”text/css” href=”./css/swiper-bundle.min.css”>
<style>
.swiper{
width:100%;
height:100%;
}
.swiper-slide{
text-align:center;
font-size:18px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
}
.swiper-slideimg{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
</style>
</head>
<body>
<div class=”swiper mySwiper“>
<div class=”swiper-wrapper”>
<div class=”swiper-slide”><imgsrc=”images/head/DuZouQiShi.jpg”/></div>
<div class=”swiper-slide”><imgsrc=”images/head/XianGuoZhi.jpg”/></div>
<div class=”swiper-slide”><imgsrc=”images/head/ShuDu.jpg”/></div>
<div class=”swiper-slide”><imgsrc=”images/head/TianDianXiaoXiao.jpg”/></div>
<div class=”swiper-slide”><imgsrc=”images/head/TangGuoJingLing.png”/></div>
</div>
</div>
<script type=”text/javascript” src=”./js/swiper-bundle.min.js”></script>
<script>
var swiper=newSwiper(“.mySwiper“, {
speed:300,
loop:true,
spaceBetween:0,
centeredSlides:true,
autoplay:{
delay:2500,
disableOnInteraction:false,
},
pagination:{
el:”.swiper-pagination”,
clickable:true,
},
navigation:{
nextEl:”.swiper-button-next”,
prevEl:”.swiper-button-prev”,
},
});
</script>
</body>
</html>