JavaScript创建可维护幻灯片效果

显然，效果很实用。对于这个效果，我们并不解释如何去使用效果库，而是讲解如何创建类似的效果，并保持他的可用性，分离式（unobtrusive），可维护性（让未来的维护者，在不需要修改你的脚本的情况下，修改图片，外观或文本标签）。

查看幻灯片效果

无 JavaScript 状态下，用户将看到下面的效果：

添加和移除图片、改变图片的顺序以及添加标题，这些在 HTML 中都很容易做到。并且最后的解决并不意味着维护者需要懂任何 JavaScript 或者在源码中搜索在哪里修改 CSS 的 class, id 或者文本标签。

你有没有准备好花费一些时间去一步一步的尝试创建这个效果？

第一步：分析问题（Analizing the problem）

创建一个好的脚本，第一步应该是去分析哪些是你要完成的：我们想要创建一个照片的幻灯片效果，并且我们想要保持维护的方便。

如何创建一个幻灯片效果

在一个网站上拥有幻灯片有几种方法：

1. 在文档中包含所有的图片。
   当他运行在无 JavaScript 状态，这是一个安全的选择。而且，当页面被载完，所有的图片也会将被载完。然而，这个方式只适用于少量的图片。

2. 在文档中包含第一张图片，并且有一个创建幻灯片功能的服务器端脚本。
   这也是相当安全的，但是对于终端用户来说，这是非常令人厌烦的——因为我不想加载整个页面，仅想得到下一张照片。但对页面展示和广告点击比较有效，这也是为什么大量的新闻站点使用这个方法。

3. 在文档中包含第一张图片，并按需加载其他图片。
   这个方法令你厌烦的是，必须依赖于 JavaScript ，并且要有一个维护照片列表的 JavaScript 数组。你还需提供一个加载指示器，用来显示用户一些正在发生的事情。

在我们的案例中，我们采取下面的图片列表，用向前和向后的按钮把他变成一个幻灯片效果，并且一个指示器告诉我们，照片总数中的哪张照片是当前显示的。

<ul id="slideshow">
    <li><img src="img/flat1.jpg" alt="Hallway" /></li>
    <li><img src="img/flat2.jpg" alt="Hob" /></li>
    <li><img src="img/flat3.jpg" alt="Bathroom" /></li>
    <li><img src="img/flat4.jpg" alt="Living Room" /></li>
    <li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>

最后的输出会看起来像例子中的幻灯片效果。

依赖关系检查

我们这里有一些元素依赖于 JavaScript 生成：文字指示器和向前和向下的链接。为了保持我们解决方法的可用性，我们需要确保一些事情：

1. 仅当 JavaScript 可用（用户信赖我们提供给他们使用的功能）时，这些元素应该出现。一个链接，不能做任何违反用户对我们的信任的事情。

2. 不论输入设备（让我们不要依赖用户是否有鼠标），交互式元素都应该可用。

3. 图片不应该被隐藏，除非使用者能再次访问他们。在技术上，仅显示第一张图片，且没有向前和向后的链接是预留退路的做法，但是为什么要用户已下载所有的图片仅只看到第一张？