# VDTimeline **Repository Path**: Vincent_Dong/VDTimeline ## Basic Information - **Project Name**: VDTimeline - **Description**: 时间线组件，支持自动播放 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-20 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # VDTimeline 时间线组件,基于 js、 Lodash 的时间线控件，支持： - 滑动加载 - 播放，快进，快退，回到第一项，回到最后项，前一项，后一项 - 自动播放 ![运行截图](https://github.com/VicentDong/VDTimeline/blob/master/screenhot.png?raw=true) ## 使用环境 - VDTimeline 支持浏览器和 Nodejs 中引入 - 浏览器支持：IE8+，Chrome，Firefox，Safari 等 ## 安装 - VDTimeline 支持多种形式的引入，包括 script，ES6，AMD，commonJS 方式的引入。 - 使用 SCRIPT 标签引入 VDTimeline 时，会创建全局的变量 VDTimeline 进行调用。 - 使用 require(‘VDTimeline’)方式引入 - ES2015 模块 如 import VDTimeline from ‘VDTimeline’ ## 使用 - 根据具体应用场景，参考上章节的 script 引入方式进行 VDTimeline 的安装。 - 为了减少包的体积，VDTimeline 抽离了部分公用 JS，如 Lodash。基于此，需要在使用时手动引入支持 lodash,可以自行采用 CDN 加速 ## 发布目录结构 ├─VDTimeline | ├─index.html | ├─main.css | ├─VDTimeline.js | ├─VDTimeline.js.map | ├─fonts | | ├─iconfont.eot | | ├─iconfont.svg | | ├─iconfont.ttf | | └iconfont.woff - fonts 文件夹 内含 VDTimeline 使用的字体资源，使用时需要添加到项目 - Index.html 这个 Html 是作为 VDTimeline 的演示/实例的 html 入口，项目引入可以删 - main.css Css 文件是 VDTimeline 加载时需要调用的样式文件，项目需要引入 - VDTimeline.js Js 文件，是 VDTimeline 的主要 Js 文件，项目需要引入 ## 示例 这里以 script 方式引入进行举例，具体使用示例如下:
### 首先创建 html 文件         Document         ### 引入相关 JS 和 VDTimeline，可以放在头部，或者 body 元素内部 - - ### 初始化 var myVDTimeLine = VDTimeline.init( //  容器
container:document.querySelector('.container'),
//  数据
data:[]
)
### 调用方法 myVDTimeLine.stop();
## 配置 - //  容器 - container: null, - //  数据 - data: [], - //  播放间隔 - interval: 2000, - //  类目个数 - size: 10, - //  快进/快退速度 - speed: 5, - //  是否显示播放按钮 - showPlayBtn: true, - //  是否显示回到第一项按钮 - showStartBtn: true, - //  是否显示回到最后一项按钮 - showEndBtn: true, - //  是否显示快退按钮 - showBackBtn: true, - //  是否显示快进按钮 - showForwardBtn: true, - //  是否显示前一项按钮 - showNextBtn: true, - //  是否显示后一项按钮 - showPrevBtn: true, - //  播放 - play: null, - //  暂停 - stop: null, - //  第一项 - toStart: null, - //  最后一项 - toEnd: null, - //  快退 - toBack: null, - //  快进 - toForward: null, - //  下一项 - toNext: null, - //  前一项 - toPrev: null, - // 自动播放 - autoPlay: false ## 方法 ### init-初始化 - 参数：option
- 描述：进行 VDTimeline 的实例的创建和初始化
### Play-播放 - 参数：function 回调
- 描述：组件播放，支持传入回调方法
- 回调参数：
data:当前项的数据
index：当前项的索引（当前时间项的索引）
start：当前时间轴的开始项索引（data 数组内索引）
end：当前时间轴的结束项索引（data 数组内索引）
### Stop-停止 如上 ### toStart-回到第一项 如上 ### toEnd-回到最后一项 如上 ### toBack-快退 如上 ### toForward-快进 如上 ### prev-前一项 如上 ### next-下一项 如上