下面是幻灯片效果的 样例 ：

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

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

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

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

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

如何创建一个幻灯片效果

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

• 在文档中包含所有的图片。
  

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

  
  


• 在文档中包含第一张图片，并且有一个创建幻灯片功能的服务器端脚本。
  

  这也是相当安全的，但是对于终端用户来说，这是非常令人厌烦的——因为我不想加载整个页面，仅想得到下一张照片。但对页面展示和广告点击比较有效，这也是为什么大量的新闻站点使用这个方法。

  
  


• 在文档中包含第一张图片，并按需加载其他图片。
  

  这个方法令你厌烦的是，必须依赖于 JavaScript ，并且要有一个维护照片列表的 JavaScript 数组。你还需提供一个加载指示器，用来显示用户一些正在发生的事情。

  
  

在我们的案例中，我们采取下面的图片列

• 1
• 挖它!