小知识，大挑战！本文正在参与“         程序员必备小知识         ”创作活动

本文同时参与 「掘力星计划」         ，赢取创作大礼包，挑战创作激励金

最近写轮播的时候，遇到了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；就好。

这个时候轮播图就可以自己动了