10.2.2　AnythingSlider教程

创建一个基本的幻灯片真的很容易。本教程将带领你经历这个过程。你可以使用任何喜欢的HTML编辑器。

注意：参见本书1.3节的介绍以了解如何下载教程文件。

1.在文本编辑器中打开chapter10文件夹下的文件slider.html。

第一步是添加AnythingSlider的CSS文件。

2.在＜link href="../_css/site.css"rel="stylesheet"＞后面的空行单击，并且输入：

＜link rel="stylesheet"href="anythingSlider/anythingslider.css"＞

这行代码将载入anythingslider.css文件，它包含了用于格式化幻灯片的特定样式。稍后，当你查看如何更新幻灯片的外观的时候，将会重新访问这个文件。接下来需要链接到必要的JavaScript文件。

3.在刚才添加的代码行的下面录入如下代码：

＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

＜script src="anythingSlider/jquery.anythingslider.min.js"＞＜/script＞

第1行载入jQuery文件，而第2行载入插件文件。现在，该要添加HTML了。

提示：对于本教程来说，用于AnythingSlider插件的JavaScript、CSS和图像文件都存储在chapter10教程文件夹中的一个名为anythingSlider的文件夹中。将插件所需要的所有文件都一起放在一个特定文件夹中，这是一种好办法，可以确保你不会搞错其中某个文件的位置。这也使得在其他站点上重用插件会更容易。如果你喜欢这种效果，可以直接将anythingSlider文件夹复制到你的站点（将其放在主根目录中或者放在专用于JavaScript文件的一个文件夹中）。

4.在代码中找到一级标题标签，即＜h1＞Anything Slider＜/h1＞，并且，在其下面的空白行中输入：

＜div id="slider"＞

＜/div＞

这是一个＜div＞标签（用来在Web页面上标记出一个区域或部分的一个HTML标签）。这个特定的div表示幻灯片自身。在其中，你可以添加更多的＜div＞标签，每个＜div＞用于你想要显示的一个幻灯片。

5.在幻灯片div中（在开始＜div＞和结束＜/div＞标签之间）输入：

＜div＞

＜a href="page1.html"＞＜img src="images/pumpkin.jpg"width="700"height="390"

alt="Pumpkin"＞＜/a＞

＜/div＞

这是第二个div，其中包含了一个链接和一幅图像。单击图像会将你带到另一个页面：这是目录式幻灯片常用的方法，它往往充当站点的一种动画的banner广告。每个幻灯片充当其他内容的预告，因此，访问者通过单击一个幻灯片跳转到该站点的一篇文章或其他部分。

有了AnythingSlider，你可以添加任何想要的HTML。不仅限于一幅较大的图像。你可以有文本、图像或者其他的div标签，包括你想要放置在幻灯片中的任何内容。

6.在幻灯片div中再添加两个＜div＞标签：

＜div＞

＜a href="page2.html"＞＜img src="images/grapes.jpg"width="700"height="390"

alt="Grapes"＞＜/a＞

＜/div＞

＜div＞

＜a href="page3.html"＞＜img src="images/various.jpg"width="700"height="390"

alt="Various"＞＜/a＞

＜/div＞

这两个div表示另外两个幻灯片。你可以添加想要的任意多个幻灯片。现在，应该来添加一些程序了。

7.在靠近文件顶部的位置，在第二个＜script＞标签之后，但是，在结束的＜/

head＞标签的前面，添加一个空行，然后输入：

＜script＞

$（document）.ready（function（）{

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

}）；

＜/script＞

不管你是否相信，你所需要做的只是选择包含了幻灯片的div，即$（'#slider'），并且应用anythingSlider（）函数。插件负责处理剩下的事情。

8.保存该文件，并且在Web浏览器中预览。

这个页面如图10-5所示（如果不是这样，仔细检查一下你的代码。你也可以将自己的作品和complete_slider.html文件相比较，后者是本教程的一个完整版本）。尝试不同的控件：单击向右箭头的按钮，向右移动到下一个幻灯片；单击左箭头按钮，回到上一个幻灯片，单击带有数字的按钮跳转到指定的幻灯片，并且，单击开始按钮开始自动播放幻灯片。

图　10-5　使用AnythingSlider jQuery插件，你可以快速创建一个交互式的幻灯片，来突出显示整个站点的页面和产品