jQuery简单实用的轮播图插件

使用方法

1:  引入核心 css 和核心 Js

<link rel="stylesheet" href="./css/swiper.min.css">
<script src="https://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="./js/swiper.min.js"></script>

注意：此插件依赖jquery，请引入最小的jquery.js

【开发环境的版本】

<link rel="stylesheet" href="./css/swiper.css"> 2.13k
<script src="./js/swiper.js"></script> 6.42k

【生产环境的版本】

<link rel="stylesheet" href="./css/swiper.min.css"> 1.54k
<script src="./js/swiper.min.js"></script> 2.53k

2: 创建一个容器来存放轮播

<!-- 轮播容器 -->
<div class="swiper-container"> 
  <!-- 轮播子项容器 -->
  <div class="swiper-wrapper"> 
    <!-- swiper-item容器中可以写入任何想要轮播的东西，例如：图片，文字，其他代码等等，把最大的操作空间留给开发者 -->
    <div class="swiper-item"><img src="./images/1.png" alt="banner"/></div>
    <div class="swiper-item"><img src="./images/2.png" alt="banner"/></div>
    <div class="swiper-item"><img src="./images/3.png" alt="banner"/></div>
  </div>
</div>

建议：swiper-item中的自定义代码样式可以新建一个样式文件存放，避免直接修改swiper核心样式文件而导致后期不好维护。

3. 初始化配置

var swiperConfig = {
        width: 800,                     // 容器宽度（最小300, 默认800）
        height: 300,                    // 容器高度（最小120, 默认300）
        speed: 3000,                    // 切换速度
        needPrevAndNextBtnGroup: true, // 是否需要前进后退按钮组
        needPagination: true           // 是否需要分页器
    }

4. 大功告成。