Timeliner - jQuery定时幻灯片插件

演 示 下 载

简介

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

Timeliner 的切换项内不仅可以放图片，还可以放其他内容，甚至是 flash。

兼容性

Timeliner 兼容所有浏览器，包括 IE6、IE7。

使用方法

1、引入文件

<link rel="stylesheet" href="css/timeliner.css">

<link rel="stylesheet" href="css/timeliner_styling.css">

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/jquery.timeliner.min.js"></script>

2、HTML

<ul id="example1" class="timeliner">

	<li title="第一个">

		<img src="images/01.jpg" alt="">

	</li>

	<li title="第二个">

		<img src="images/02.jpg" alt="">

	</li>

	<li title="第三个">

		<img src="images/03.jpg" alt="">

	</li>

	<li title="第四个">

		<img src="images/04.jpg" alt="">

	</li>

	<li title="第五个">

		<img src="images/05.jpg" alt="">

	</li>

</ul>

2、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+'"');

	}

}

</script>

参数

以下是一些主要参数，可根据需要配置。

参数	类型	说明	默认值
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

演 示 下 载

下载地址

·进入下载地址列表