简单的图片循环播放器

WordPress不让我痛痛快快地在正文里写JavaScript（例如会把&符号编码，弄得我没法说“and”），所以我把示例播放器的页面放在这里了。打开页面，右击，可以看源代码。

代码说明：

首先这个程序需要jQuery的支持：

<script type='text/javascript' src='/js/jquery.min.js'></script>

其次，CSS需要用“position:absolute;”，使要播放的图片事先重叠在一起。

<style>
	.slide {
		position: absolute;
		left: 0px;
		top: 0px;

		width: 600px;	/* Customizable */
		height: 420px;	/* Customizable */
	}
</style>

下面这个不算代码，其实是HTML的正文部分，图片在这里被HTML使用。关键的三点：

1. 顶层<div>的id需要和播放函数（等下会提到）的参数一致（示例是“YadingPhoto”）。
2. 每张图片不是直接挂在顶层<div>下的<img>，而是放在一个子<div>里的，这是为了让播放器有播放文字的功能（<div>里想写啥都是可以的，不只可以放图片）。
3. 包装图片的<div>的class要和上头的CSS代码保持一致（示例是“slide”）。

<div id='YadingPhoto' style='position:relative;width:600px;height:420px;'>
	<div class='slide'>
		<img src='../pic/xianuoduoji-slidedemo.jpg' alt='XiaNuoDuoJi' title='XiaNuoDuoJi'>
		<div style='text-align:center;'>Yading - Xia Nuo Duo Ji</div>
	</div>
	<div class='slide'>
		<img src='../pic/xiannairi-slidedemo.jpg' alt='XianNaiRi' title='XianNaiRi'>
		<div style='text-align:center;'>Yading - Xian Nai Ri</div>
	</div>
	<div class='slide'>
		<img src='../pic/yangmaiyong-slidedemo.jpg' alt='YangMaiYong' title='YangMaiYong'>
		<div style='text-align:center;'>Yading - Yang Mai Yong</div>
	</div>
</div>

最后是播放器本身的JavaScript代码，由于jQuery的selector和hide/show的淡入淡出效果都已做好，这个程序可以写得很短。程序的主要思路，是每隔几秒钟，就把排头的<div>挪到队尾去，这样排第二的那个<div>的内容就露出来了。

两个小函数接受的参数，其实并不精确地是id，而是一个jQuery selector，示例中，是“#YadingPhoto”，这是为了更广泛地利用jQuery强大的页面元素定位功能。

<script type='text/javascript'>
	initSlide('#YadingPhoto');	// Customizable, must equal to the slide show top div's ID.
	setInterval("switchSlide('#YadingPhoto')", 5000);	// Customizable.

	function initSlide(slideID)
	{
		if ($(slideID + " > div").length <= 1)
			return;
		var selector = slideID + " > div";
		$(selector).hide(0);
		$(selector).css("z-index", "-1");
		$(selector + ":first").show(0);
	}

	function switchSlide(slideID)
	{
		if ($(slideID + " > div").length <= 1)
			return;
		var selector = slideID + " > div";
		$(selector + ":first").next().fadeIn("slow");
		$(selector + ":first").fadeOut("slow");
		$(selector + ":first").appendTo($(slideID));
	}
</script>