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://img-blog.csdn.net/20180531112426283',
url:'http://www.baidu.com'
},
{
img:'https://img-blog.csdn.net/20180531112432547',
url:'http://www.baidu.com'
},
{
img:'https://img-blog.csdn.net/20180531112437692',
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>
备注：欢迎加入web前端求职招聘qq群：668352707
