最近写轮播的时候,遇到了swiper
然后就自己使劲捉摸了一番
首先Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。
如果要使用swiper,首先要导入两个文件:swiper.min.css和swiper.min.js
这在官网里有
然后成功引入
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js"></script>
然后就是按照管网的格式一步步写代码
首先html部分
//1.swiper-container
<div class="swiper-container swiper-container-fade swiper-container-initialized swiper-container-horizontal">
//2.swiper-wrapper
<div class="swiper-wrapper">
//3.swiper-slide 里面存放每一页的内容
<div class="swiper-slide">
<img src="images/f5.jpg" alt="">
<div class="text text5"></div>
</div>
<div class="swiper-slide">
<img src="images/f1.jpg" alt="">
<div class="text text1"></div>
</div>
<div class="swiper-slide">
<img src="images/f2.jpg" alt="">
<div class="text text2"></div>
</div>
<div class="swiper-slide">
<img src="images/f3.jpg" alt="">
<div class="text text3"></div>
</div>
<div class="swiper-slide">
<img src="images/f4.jpg" alt="">
<div class="text text4" id="text"></div>
</div>
<div class="swiper-slide">
<img src="images/f5.jpg" alt="">
<div class="text text5"></div>
</div>
<div class="swiper-slide">
<img src="images/f1.jpg" alt="">
<div class="text text1"></div>
</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
//以下是自定义的分页按钮
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span>
<span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
js部分
<script>
window.onload = function() {
//new 一个swiper
var swiper =new Swiper('.swiper-container',{
slidesPerView:1,
spaceBetween:30,
effect:'fade',
loop:true, //循环
autoplay:3000, //自动播放,三秒换一张
//分页器
pagination:{
el:'.swiper-pagination',
clickable:true,
},
//导航按钮
navigation:{
nextEl:'swiper-button-next',
prevEl:'swiper-button-prev',
},
});
}
</script>
注意
有些地方会把自动播放这样写
autoplay(){
delay:3000s,
},
但是我这么写的时候时间会很快是autoplay里的默认时间,所以
直接写成autoplay:3000;就好。