10.2　为站点添加一个内容幻灯片

Web设计师用于解决信息过多的另一款工具是内容幻灯片，它是一个简单的类似幻灯片的界面，每次从一堆内容中显示一幅图片。很多信息丰富的站点，例如Microsoft.com，使用一小块的幻灯片来显示图像、文本以及链接，这些幻灯片横跨屏幕（如图10-4所示）。一个幻灯片就像是一个标签页面板，只不过幻灯片面板通常具有相同的大小，并且在一个幻灯移动中动态地出现在屏幕上，而且常常运行一定的时间，每隔数秒钟面板就会幻灯式地滑过屏幕。幻灯片通常用在主页上，以保持页面简单而富有吸引力，而同时又突出显示很多的内容。在站点的其他页面上，它们经常充当招揽顾客的传单、广告内容或者产品。单击幻灯片中的一个面板，通常会导向另一个Web页面。

内容幻灯片需要掌握JavaScript和jQuery编程的一些要素，包括动画、定时器以及操作CSS和HTML。尽管你可以编写自己的幻灯片，但是，还是有很多jQuery插件提供各种广泛的、有用的功能。最为全面的jQuery幻灯片插件叫做AnythingSlider（可以从https：//github.com/ProLoser/AnythingSlider/下载）。

图　10-4　为了将屏幕上的杂乱程度降到最低，像Microsoft.com这样的站点使用内容幻灯片（带有黑色边框的部分），每次显示一副单个的图像或一块内容。在这个例子中，带有边框的图像可以向左滑动出视线，显示另一幅带有更多信息的图像

10.2.1　使用AnythingSlider

AnythingSlider需要几个文件才能工作：jQuery（这当然是需要的）、带有幻灯片程序的一个JavaScript文件、样式化基本幻灯片效果的一个CSS文件，以及用于幻灯片控制的一个图像文件（next按钮和previous按钮）。你可以从https：//github.com/ProLoser/AnythingSlider/下载AnythingSlider。（我们已经在本章的教程文件中包含了必要文件的一个副本）。使用该插件的基本过程很简单，步骤如下所示。

1.将anythingslider.css文件附加到Web页面。

这个外部的CSS提供了用于幻灯片导航按钮的格式化指令，以及用于放置单个幻灯片的背景样式。通过更改这个文件中的样式（参见下面的介绍），你就可以修改幻灯片的基本元素。

2.链接到jQuery文件。

jQuery提供了AnythingSlider所需要的基本工具集。和使用任何jQuery插件一样，你必须先载入jQuery JavaScript文件。如果在插件文件载入之后再载入jQuery，它将无法工作。

3.连接到AnythingSlider文件。

这个文件包含了基本的程序，用来将HTML转换为一个幻灯片。4.添加HTML。

AnythingSlider不需要任何复杂的HTML。你只需要添加一个容器div，它带有一个ID为slider，即＜div id="slider"＞，并且，在该div中，为每个面板插入一个div或“幻灯片”。这和为标签页面板设置面板非常类似（参见10.1.1节的介绍）。

5.添加＜script＞标签和$（document）.ready（）函数，然后调用AnythingSlider函数：

使用jQuery插件的乐趣之一是，它们往往需要很少的代码就能工作。在这个例子中，在到AnythingSlider文件的链接之后（参见步骤3），所需要添加到该页面的简单代码如下所示：

＜script＞

$（document）.ready（function）{

$（'#slider"）.anythingSlider（）；

}）；//end ready

＜/script＞

正如你在本章稍后将要见到的，有很多种方法来定制化AnythingSlider效果。但是，你首先要玩转插件。