swiper插件实现js轮播图_js轮播图插件-优快云博客

初入js中有一个必会做的效果，那就是轮播图。轮播图在各网页上也很常见。

轮播图

但是会发现，用原生js写轮播图，代码十分冗长，有时候出现小问题也不知道在哪里。

不过有个swiper插件可以直接实现轮播图效果。

具体使用也很简单，可以看swiper中文教程。

以下是方法。

1.官网上获取swiper，下载一个swiper版本。

2.下载完成后解压后获得的一个文件夹，将文件夹里名为swiper-bundle.min.css和swiper-bundle.min.js放在所写网页的根目录下，也可以新建一个文件夹，将两个文件放在文件夹里，也可将下载好后的文件夹直接放在所写网页的根目录。

3.依据所放的位置，在head处进行链接link（此处放在swiper文件夹）

<link rel="stylesheet" href="swiper/swiper-bundle.min.css">

以及.js文件的链接

<script src="swiper/swiper-bundle.min.js"></script>

4.主题代码可以直接在网页上复制（位置在中文教程-swiper使用方法）

    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="photos/4.0图.jpg"></div>
            <div class="swiper-slide"><img src="photos/琳妮特.jpg"></div>
            <div class="swiper-slide"><img src="photos/林尼.jpg"></div>
            <div class="swiper-slide"><img src="photos/林尼2.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>

可以看备注来看自己需要那些。

5.依据自己的习惯进行页面的调整。

6.书写js部分

var mySwiper = new Swiper ('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // 如果需要滚动条
    // scrollbar: {
    //     el: '.swiper-scrollbar',
    // },

    autoplay:true,//等同于以下设置
    /*autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
      },*/

})

垂直切换选项，是轮播图圆点的位置是否水平或者垂直。循环模式判断为是否自动循环轮播。其余可以看备注。

写到这里，轮播图就可以自动轮播了。

7.如果想要轮播效果进行改变，例如翻转，可以在js部分中加入