jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果，并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。 推荐阅读：之前分享过一款 [url=http://www.1sucai.cn/jiaoben/351762.html]jQuery实现企业发展简史时间轴特效源码[/url] ，它的界面展示效果很不错。 [img]http://files.jb51.net/file_images/article/201602/2016216171143524.png?2016116171155[/img] [b][url=http://demo.jb51.net/js/2016/jquery_timelinr]效果展示[/url]       [url=http://xiazai.jb51.net/201509/yuanma/jquery_timelinr(jb51.net).rar]源码下载[/url][/b] [b]使用方法[/b] 使用该时间轴插件需要在页面中引入jQuery和jquery.timelinr.js文件。 [b]HTML结构[/b] 该时间轴插件的基本HTML结构如下： [b]初始化插件[/b] 在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该时间轴插件。 [b]配置参数[/b] [b]jquery.timelinr.js时间轴插件的配置参数有：[/b] orientation：时间轴的方向，可选值有：horizontal | vertical默认值为'horizontal'。 containerDiv：时间轴容器DIV的ID选择器。默认为：'#timeline'。 datesDiv：显示时间的容器的ID选择器。默认为：'#dates'。 datesSelectedClass：当前选中时间的class。默认值为：'selected'。 datesSpeed：时间轴的动画速度。值从100-1000，或'slow'，'normal'，'fast'。默认值为：'normal'。 issuesDiv：信息描述的DIV的ID选择器。默认为：'#issues'。 issuesSelectedClass：当前选择的信息描述的DIV的class。默认值为：'selected'。 issuesSpeed：信息描述的DIV的动画速度。值从100-1000，或'slow'，'normal'，'fast'。默认值为：'fast'。 issuesTransparency：信息描述的DIV的透明度。值0-1之间，默认值为0.2。 issuesTransparencySpeed：透明度动画的速度。值从100-1000之间，默认为500。 prevButton：向前按钮的ID选择器。默认为：'#prev'。 nextButton：向后按钮的ID选择器。默认为：'#next'。 arrowKeys：是否允许使用键盘来控制。默认为：false。 startAt：开始的索引下标，默认为1。 autoPlay：是否自动播放。默认为'false'。 autoPlayDirection：自动播放的方向。可选值有：forward | backward。默认值为：'forward'。 autoPlayPause：自动播放的间隔。整数值，1000 = 1秒，默认为2000。 jquery.timelinr.js时间轴插件的github地址为： https://github.com/juanbrujo/jQuery-Timelinr 以上所述是关于jQuery Timelinr实现垂直水平时间轴插件的相关内容，希望对大家有所帮助！