html定时载入jquery,jQuery定时幻灯片插件Timeliner

jQuery定时幻灯片插件Timeliner

分类：代码

日期：2016-07-31

点击(8,793)

下载(0)

来源：未知

收藏

Timeliner 是一个基于 jQuery 的定时幻灯片插件，它能够轻松地创建一个带有时间线的幻灯片，通过时间线，你可以清楚的看到幻灯片切换的时间、当前所在及其他信息。通过配置参数，可以设置是否显示时间、是否显示“开始/暂停”控制、是否显示“上一个/下一个”控制、是否显示 title 信息、是否自动播放、是否循环播放等等。Timeliner 还可以通过键盘空格键控制暂停/播放。

Timeliner 的切换项内不仅可以放图片，还可以放其他内容，甚至是 flash。Timeliner 兼容所有浏览器，包括 IE6、IE7。

使用方法

引入文件

HTML

• 
• 
• 
• 
• 

JavaScript

$(function() {

$('#example1').timeliner({

containerwidth: 696,

containerheight: 241,

timelinewidth: 550,

timelineheight: 8,

repeat: false,

timedisplayposition: 'below',

transition: 'fade'

});

});

function start_callback(id) {

if (id == 'example1') {

$('#callback_log').html('幻灯片 "' + id + '" 开始');

}

}

function newslide_callback(id, slide) {

if (id == 'example1') {

$('#callback_log').html('幻灯片 "' + id + '" 切换到 ' + slide);

}

}

function end_callback(id) {

if (id == 'example1') {

$('#callback_log').html('幻灯片 "' + id + '" 结束');

}

}

function paused_callback(id, slide) {

if (id == 'example1') {

$('#callback_log').html('幻灯片 "' + id + '" 暂停在幻灯片 ' + slide);

}

}

function resumed_callback(id, slide) {

if (id == 'example1') {

$('#callback_log').html('幻灯片 "' + id + '" 重新开始从幻灯片 ' + slide);

}

}

function click_callback(id, slide) {

if (id == 'example1') {

$('#callback_log').html('Clicked on slide ' + slide + ' of Timeliner "' + id + '"');

}

}

参数

参数

类型

说明

默认值

showtimedisplay

布尔值

显示时间

true

showpauseplay

布尔值

显示“暂停/播放”

true

showprevnext

布尔值

显示“上一个/下一个”

true

showtooltip

布尔值

时间点显示title

true

showtotaltime

布尔值

显示总时间

false

showtooltiptime

布尔值

显示时间点时间

false

containerwidth

数值

幻灯片宽度

800

containerheight

数值

幻灯片高度

400

timelinewidth

数值

时间线宽度

720

timelineheight

数值

时间线高度

8

timelineverticalmargin

数值

时间线上下 margin

30

autoplay

布尔值

自动播放

true

repeat

布尔值

循环播放

true

timedisplayposition

字符串

时间显示位置，可选 below / above

above

transition

字符串

幻灯片切换方式，可选 fade / slide / reveal / instant

slide