小白入门 — 使用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>

这里需要注意，引入图片的同时先创建一个图片的容器，为接下来实现自动轮播做准备~

因为之前引入的CSS插件，所以样式就不用操心啦，只修改图片的宽高即可~

图片导入完成之后，就到了怎么使用swiper插件的时候啦，仔细看，别眨眼~

使用插件

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

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

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

效果展示

是不是发现就简单几行代码就能实现非常复杂的逻辑效果，这就是插件的好用之处~

总结

swiper插件的使用不仅仅只是于此，有一个功能如此强大的插件是不是省区各位程序猿的时间呢~

切记：swiper插件虽然很强大，但是也不能忘记了最底层的逻辑结构~