目录

swiper插件

1.引入jQuery库

2.引入插件swiper

3.引入swiper插件中的css样式

导入图片

---

swiper插件

实现轮播图自动切换效果

首先创建一个html页面，然后依次引入插件。

1.引入jQuery库

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

2.引入插件swiper

<script src="插件/swiper-4.5.3/dist/js/swiper.min.js"></script>

3.引入swiper插件中的css样式

<link rel="stylesheet" href="插件/swiper-4.5.3/dist/css/swiper.css">

导入图片

1.引入本地已经下载好的图片或者在网上提取出来的图片

<div class="swiper-container">
   <!-- 图片列表容器 -->
   <div class="swiper-wrapper">
     <img class="swiper-slide" src="imgs/1.jpg">
     <img class="swiper-slide" src="imgs/2.jpg">
     <img class="swiper-slide" src="imgs/3.jpg">
     <img class="swiper-slide" src="imgs/4.jpg">
     <img class="swiper-slide" src="imgs/5.jpg">
   </div>
</div>

使用插件

<script>
var swiper = new Swiper('.swiper-container', {
    autoplay: true
});
</script>

autoplay 相当于开关，true表示开启~

不仅可以自动切换，也可以用鼠标点击手动切换。