手写jQuery轮播图插件，即拿即用，更多接口，更少代码实现你想要的轮播图~~

概述

• 众所周知在2020年的今天，随着vue, react等当红小鲜肉的的出现和大面积使用，曾经的王者jQuery已经有退出舞台之势。但瘦死的骆驼比马大，jQuery源码中的思想对学习原生js可以说是大有益处。感兴趣的小伙伴可以去看看源码，绝对对你的编程思维是百利而无一害。
• 今天笔者给大家带来JQ版的轮播图插件，现拿现用，操作简单，效果丰富，轮播图绝对是前端初学者的必经之路，但对初学者来说每次做页面时手写轮播图略显繁琐，所以大家可以在自己的页面中引入该插件，快捷便利，一劳永逸。

使用步骤

1. 首先既然是JQ轮播图插件，那肯定得引入JQ，建议大家不要用低于1.8.3版本的jQ，因为低版本JQ有些没有on()方法，会导致插件出错。笔者这里用的是3.1.1版本。大家不想下载的话，可以直接使用JQuery cdn，这里也为大家提供了链接

<script src="./jquery-3.1.1.min.js"></script>

/**JQuery cdn*/
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

2. 把插件相应的js和css文件引入到需要的页面中，
   注意swiper.js放在jquery的后面引入
   
3. 开始代码书写：

• 这里的类名你都可以自行决定，最外层的div.swiper2就是你轮播图的最外层，里面的item是你轮播图每帧播放的内容，大家使用的99%情况下内容应该都是图片，需要链接则可在img外再套一层a标签，这样html部分就写完了，是不是比手写要轻松很多呢hhh

  <div class="swiper2">
      <div class="item">
          <img src="./img/test1.jpg" alt="">
      </div>
      <div class="item">
          <img src="./img/test2.jpg" alt="">
      </div>
      <div class="item">
          <img src="./img/test3.jpg" alt="">
      </div>
  </div>
  

• 下面是样式部分，这就更简单了，你需要设置最外层div和img的宽高并让它们保持一致，当然不要忘了给最外层加上溢出隐藏，(注意，最外层默认position: relative且不可更改) 几行代码搞定~

  .swiper2, 
  .swiper2 .item img {
        width: 400px;
        height: 200px;
  }
  .swiper2 {
          overflow: hidden;         
  }
  

• 最后一步就要开始定制你想要的轮播图了，这里笔者为大家预留出来了一些可供大家操作的接口，尽可能方便大家更好地达到理想的需求

  轮播图的用户配置：
          1. 动画类型： animateType: 'fade'(淡入淡出) 'animation' (从左到右的轮播)
          2. 是否自动轮播： isAutoChange （布尔值）
          3. 轮播的内容： domList（dom数组）（这里要传的就是我们之前写好的轮播内容 div.item） 
          4. 是否显示左右按钮：showChangeBtn: 'always'（一直在页面当中） 'none'（一直不显示） 'hover' （鼠标移入轮播图区域显示）
          5. 是否显示小圆点：showSpotBtn: (布尔值)  
          6. 小圆点显示的位置：spotPosition: center(居中) left(靠左) right(靠右)
          7. 小圆点的样式：spotStyle: 'sty1'  'sty2'  'sty3'
          8. 轮播区域的大小： width  height(这里需要与你之前css设置的尺寸一致)
          9. 自动轮播切换的时长: duration 单位：毫秒
  

  $('.swiper2').swiper({
          animateType: 'fade',
          isAutoChange: true,
          domList: $('.swiper2 > .item'),
          showChangeBtn: 'none',
          showSpotBtn: true,
          spotStyle: 'sty3',
          spotPosition: 'center',
          width: 400,
          height: 200,
          duration: 2000
      })
  

  大家可能觉得配置接口太多了，使用起来一条一条写比较麻烦，这里笔者为每个接口都设置了默认值，某个接口不写时就会自动使用默认值，但建议大家至少应该设置上domList、width、height这三个接口的值，不然可能会跟预期的结果不同。

  	animateType：    默认值为  'animation',
      isAutoChange：   默认值为  true,
      domList：        默认值为  [],
      showChangeBtn：  默认值为  'always',
      showSpotBtn：    默认值为  true,
      spotPosition：   默认值为  'center',
      spotStyle：      默认值为  'sty1',
      width：          默认值为  轮播图最外层的宽度,
      height：         默认值为  轮播图最外层的高度,
      duration：       默认值为  3000毫秒
  

  所以我们想要实现一个基本的轮播图，只需要设置这样三个接口的值就完全欧克了，这样是不是写起来就很简单辣，可以根据自己的需求在这基础上再进行增加。

  $('.swiper2').swiper({
          domList: $('.swiper2 > .item'),
          width: 400,
          height: 200,
      })
  

4. 下面放上效果图，收工，其他的设置大家也可以拿源码应用到自己的页面中依次尝试，总而言之呢相比于自己手写，插件实在是为开发带来了极大的便利，如果大家在使用过程中发现了Bug,可留言与笔者联系。
   在文章的末尾附上插件的源码链接，不需要积分，欢迎大家下载使用。文章较长，感谢大家阅读！最后祝大家身体健康，天天开心！

   
   插件地址：https://download.csdn.net/download/I_small_white/12540969