其实咱们早已看到过循环了，只是当时并没有要求大家看明白。

循环，就是让程序反复执行同一段代码。利用计算机速度快，脾气好，不怕麻烦的优势（这几点，人类确实比不上），也省得人们把相似的任务反复书写几百遍。

有两种循环，一种是事先预知要循环多少次的，一种事先不知道。这两种循环，咱们在《程序在干什么？》一章里见过。那里头讲过三个例子，第一个例子是从1加到100，我们都知道要循环100次。第二个例子是九九乘法表，我们知道要重复做9行，每行做N列（N等于当前的行数）。第三个例子是猜平方根，这个就不能实现确实要循环多少次了，只隐约觉得精度好过亿分之一就可以结束。

预知循环次数、知道每次循环时要喂什么数据给程序的，叫做for循环。for的意思是：对于（for）每次循环，使用这些值……

预先不知道循环次数，只知道循环的结束条件的，叫做while循环，意思是：当（while）某条件判断为真的情况下，反复执行这段程序……

其实for循环是while的一个特例，例如那个从1加到100的，下面的两段程序，一个用for，一个用while，得到的结果是一样的：

>>> total = 0
>>> for i in range(1, 101):
	total += i
	
>>> total
5050


>>> total = 0
>>> i = 1
>>> while i < = 100:
	total += i
	i += 1
	
>>> total
5050
>>> 

所以我们先讲while。在Python里，while的用法是：

while 条件判断表达式:
	做这个
	做那个
	东张西望

凹进去的这段程序，只要“条件判断表达式”为真（True），就会被反复执行。上面的累加例子里，只要i小于等于100，累加就会持续下去。

while太简单太直观了，没啥可说的，直接说for吧，for的用法是：
猛击阅读全文

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>