30-讨论

13.7.3　讨论

本秘诀从定义两个关键变量 speed （表示毫秒的数字值）和 pause （告诉循环播放器是否播放的布尔值）开始。 speed 开始时设置为2秒， pause 设置为 false ，允许循环播放器在页面加载时自动播放。

在 rotate() 函数中，设置了一个 $next_li 变量，它将对应当前动画显示的下一个 <li> 或者数组中的第一个 <li> （到达数组最后，需要重新开始时）。 <ul id="rotator_controls"> 中的链接适用相同的逻辑，为当前活跃的图像按钮添加一个视觉指示器。在两秒钟的延迟之后，整个图片序列再次启动。

如果演示程序在这里结束，得到的就是令人厌烦的无控制图片循环。幸运的是，可以重用来自选项卡式文档秘诀中的页内锚链接技术。简单地为 <ul id="rotator_controls"> 中的链接指定单击监听器，然后在显示目标图片的同时隐藏其他图片。还添加了一个播放/暂停按钮，用来启动/停止循环播放器的动画。

最后是使一切动起来的代码。 <ul id="rotator"> 中除了第一个 <li> 之外，其他元素都隐藏起来，当窗口加载结束时，开始显示动画。注意, $(window).load() 与 $(document).ready() 有所不同，因为前者等待所有资源（包括图片）完全加载，这对于图片循环播放器来说特别重要。而后者只等待HTML结构完整，这对于在页面其余图片尚在加载中应用功能很重要。两者同样重要，但是各有其适用的场合。