0
点赞
收藏
分享

微信扫一扫

swiper轮播图实例



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">

<!-- Demo styles -->
<style>
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}

.m-swiper-container{width: 100%;}
.m-swiper-slide{display: block; background-size: 100% 100%;}
.m-swiper-img{width: 100%;}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container m-swiper-container" id="m-swiper-container">
<div class="swiper-wrapper" id="m-swiper-wrapper">
</div>
</div>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiperWrapper = $('#m-swiper-wrapper');
var json = [{
img:'https://file.cfanz.cn/uploads/png/2022/07/01/1/3T8B011S43.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=',
url:'http://www.baidu.com'
},
{
img:'https://file.cfanz.cn/uploads/png/2022/07/01/1/6ca6aV09a4.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=',
url:'http://www.baidu.com'
},
{
img:'https://file.cfanz.cn/uploads/png/2022/07/01/1/JIfR5SQZZH.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=',
url:'http://www.baidu.com'
}];
var html = '';
for (var i = 0; i < json.length; i++) {
html += '<a class="swiper-slide m-swiper-slide" href="' + json[i].url + '">' +
'<img src="' + json[i].img + '" class="m-swiper-img">' +
'</a>';
}
swiperWrapper.html(html);
var swiper = new Swiper('#m-swiper-container', {
speed:300,
autoplay : {
delay:3000
},
loop: true
});
</script>
</body>
</html>



swiper轮播图实例_css

swiper轮播图实例_css_02

swiper轮播图实例_css_03



举报

相关推荐

0 条评论