swiper插件的使⽤（快速实现轮播图）swiper插件的使⽤（快速实现轮播图）
1.进⼊swiper官⽹
在获取Swiper下点击Swiper CDN地址
你会看到以下代码，以下代码可直接⽤，但是我们只选择我们要⽤的
2.选择代码包进⾏引⽤
我们引⽤两个压缩过的代码⽂件，就叫他代码包吧
<link rel="stylesheet"href="cdnjs.cloudflare/ajax/libs//css/swiper.min.css">
<script src="cdnjs.cloudflare/ajax/libs//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="cdnjs.cloudflare/ajax/libs/Swiper/4.0.1/css/swiper.min.css"> <script src="cdnjs.cloudflare/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>
js实现轮播图最简代码</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img0.baidu/it/u=3436810468,4123553368&fm=26&fmt=auto"alt=""> </div>
<div class="swiper-slide">
<img src="img2.baidu/it/u=3666548066,2508071679&fm=26&fmt=auto"alt=""> </div>
<div class="swiper-slide">
<img src="img2.baidu/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的结构都是由⾃⼰设计主导的，有时候为了得到轮播图的效果，我们也需要遵循官⽹提供的结构，就⽐如下⼀例⼦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。