jQuery轮播图插件 (原创)

所属分类：媒体-幻灯片和轮播图

21588 194 查看评论 (13)

分享到微信朋友圈

查看演示立即下载

插件描述：1: 最简易的轮播图！ 2: 用户可自定义其他功能和样式！ 3: 可轮播自定义页面，并非仅轮播图片。

更新时间：2020-06-27 19:21:50

更新说明：在原有轮播的基础上，轮播效果改为无缝连接的交互体验。

更新时间：2020-06-16 09:40:53

使用方法

1: 引入核心 css 和核心 Js

<link rel="stylesheet" href="./css/swiper.min.css">
<script src="https://www.jq22.com/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. 大功告成，开始愉快的玩耍吧。

移动端H5键盘(原创)

vue分类筛选