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

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

如何创建一个幻灯片效果

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

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

复制内容到剪贴板 代码: <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 生成：文字指示器和向前和向下的链接。为了保持我们解决方法的可用性，我们需要确保一些事情：

第二步：规划脚本（Planning the Script）

一旦你已经评估了问题，并挑选出你想使用的解决方法，你便可以开始规划脚本。本质上，我们的脚本应该做这些：

不同的功能处理

我们有一些方法处理这个问题。其中之一是使用 DOM 遍历每个 LI 条目并隐藏他。在这个事件监听函数，我们先隐藏先前显示的 LI （如果有的话），并显示当前的这个。

注：显示和隐藏代替图片的 LI 更有意义，因为他允许维护者在每个幻灯片上添加其他的元素，比如，一些标题。

这个方法的问题在于，我们在 JavaScript 中做必要的样式改变，这意味着如果有需要比刚才我们脚本中改变 display 从 block 到 none 更复杂的样式改变，将使脚本变得更杂乱（没有从行为中分离表现）。

样式留给 CSS 解析器

更简洁的方法是将所有的外观改变（在所有列表项下载完之后隐藏某些）都留给浏览器的 CSS 解析器。在我们的例子中，我们可以在幻灯片中使用一个 CSS 规则很容易地隐藏所有的列表项，并用一个特定的 class 重写当前条目的样式。

HTML：

复制内容到剪贴板 代码: <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>

CSS：

复制内容到剪贴板 代码: #slideshow li{
    display:none;
}
#slideshow li.current{
    display:block;
}

唯一的问题是，如果我们使 CSS 和 JavaScript 不可用，访客将永远不能访问到其他图片。因此，我们需要仅当 JavaScript 可用时，应用这些样式。技巧是，当 JavaScript 可用，在幻灯片的 UL 上应用 class ，例如名为 js 。这允许我们仅当 JavaScript 可用时，显示效果，通过在 CSS 中简单的修改：

CSS：

复制内容到剪贴板 代码: #slideshow.js li{
    display:none;
}
#slideshow.js li.current{
    display:block;
}

这个 class 的钩子（hook）也能被用来对幻灯片的静态和动态版本提供一个完全不同的外观。

我们所有的脚本需要做的是，通过移除或添加 current 的 class 来显示和隐藏当前及以前的照片。

为了确保我们的脚本将不会影响同一页面上的其他脚本，我们将创建一个主要的对象，并在其上构造所有的方法和属性。这可以确保我们的 init() 函数将不会被覆盖或覆盖其他任何相同名字的函数。

JavaScript: