swiper插件的使用（快速实现轮播图）
1.进入swiper官网
在获取Swiper下点击Swiper CDN地址
你会看到以下代码，以下代码可直接用，但是我们只选择我们要用的
2.选择代码包进行引用
我们引用两个压缩过的代码文件，就叫他代码包吧
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>
插入代码时候注意，我们在引用的代码上稍作修改，改一下版本。统一改成4.01，如下图
3.进入官网的API文档
已经成功完成以上步骤的话我们就可以去api文档中选择想要的轮播图效果啦！！！
我们可以看到有很多效果，每一种效果都有js文件代码提供，我们复制即可！！！
4.前端效果演示
我们将步骤三的代码复制到我们HTML中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
<style>
body{
margin: 0;
}
.swiper {
width: 100%;
height: 300px;
}
.swiper img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://img0.baidu.com/it/u=3436810468,4123553368&fm=26&fmt=auto" alt="">
</div>
<div class="swiper-slide">
<img src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto" alt="">
</div>
<div class="swiper-slide">
<img src="https://img2.baidu.com/it/u=1729250424,3321747351&fm=26&fmt=auto" alt="">
</div>
</div>
</div>
</body>
<script>
var mySwiper = new Swiper('.swiper',{
loop : true,
})
/*如果只有一个slide就销毁swiper
if(mySwiper.slides.length<=3){
mySwiper.destroy();
}*/
</script>
效果如下图（其实我在拖着他换图）
**注意**
并不是每个h5的结构都是由自己设计主导的，有时候为了得到轮播图的效果，我们也需要遵循
官网提供的结构，就比如下一例子
