10.2.3　定制幻灯片外观

正如你所看到的，使用AnythingSlider相当容易。当然，这个幻灯片的“新潮的”外观可能和你的站点的设计并不匹配，并且你可能不想或者不需要其所有的功能（例如，幻灯片自动播放，或者向前和向后按钮）。AnythingSlider的外观可以以多种方式更改：编辑一个图形文件、编辑样式表以及为插件设置选项（将在下一节介绍）。

使用一种叫做CSS精灵的技术，可以使单个的图像文件充当多种角色，既表示向后和向前箭头的常规和“悬停”状态，又体现了数字按钮以及“开始”按钮的阴影背景（要了解CSS精灵，请访问http：//css-tricks.com/158-css-sprites/）。你可以编辑这些图像文件（每个箭头是45像素×140像素，带下拉式阴影），并且添加自己的箭头图像。

你也可以编辑样式表来定制幻灯片的外观。下面是你可能需要编辑的一些最常见的格式化修改和样式的列表：

·幻灯片的高度和宽度。anythingslider.css文件中的第一个样式#slider控制了幻灯片播放的整体宽度和高度。你可以调整宽度值，以容纳一个更宽或更窄的幻灯片，并且如果幻灯片比默认的390像素高或者低，可以调整高度值。

·导航按钮的颜色。在幻灯片底部编号的按钮通常都是绿色的。如果你不喜欢这种颜色，编辑如下这一系列的样式：div.anythingSlider.activeSlider、.anythingControls ul a.cur、div.anythingSlider.active Slider.anythingControls ul a.，将背景颜色从#7C9127修改为和你的站点相匹配的一种颜色。如果你想要更改字体颜色，也可以用你想要的颜色来添加颜色属性。例如：

color：#F44439；

·导航按钮的翻滚颜色。你可以给导航按钮定义一种新的背景颜色，通过编辑div.anythingSlider.anythingControls ul a：hover样式，来更改字体或者你想要更改的属性。当前，直接从按钮上删除背景图像（下拉阴影）。

·当前选择的导航按钮。可以通过给样式表添加一个名为div.anythingSlider.activeSlider.anythingControls ul a.cur的样式，并且设置一种不同的背景颜色、字体等，来突出显示与当前显示的幻灯片相关的按钮。确保要么将这个样式放置在上面的“导航按钮的颜色”部分所列出的样式之后，要么通过从其中删除div.anythingSlider.activeSlider.anythingControls ul a.cur来编辑样式。由于上面列出的样式已经有与其相关的背景颜色，它将覆盖你的新样式，除非你将新的样式放在样式表中较后面的位置。

开·始和结束按钮的颜色。用来开始和停止幻灯片动画播放的按钮，通过两种样式来控制。要更改开始按钮的背景颜色和字体颜色，可以编辑div.anythingSlider.start-stop。要更改停止按钮的红色，可以编辑div.anythingSlider.start-stop.playing样式。

·删除下拉式阴影并且对导航按钮做其他的更改。如果你不喜欢出现在导航按钮上的下拉式阴影和开始/停止按钮，那么，编辑div.anythingSlider.anythingControls ul a和div.anythingSlider.start-stop样式：删除background-image属性。你也可以在这些样式上编辑border-radius、-moz-border-radius和-webkit-border-radius属性，以删除或增加这个按钮的圆角。这些样式控制了按钮的基本外观，因此，值得尝试一下它们并看看所创建的新外观。

·幻灯片显示之上和之下的绿色边框。幻灯片之上和之下有一个绿色的、3像素的边框。编辑div.anythingSlider.anythingWindow样式来更改它。直接删除border-top和border-bottom属性以完全删除边框，或者只是更改其设置，以修改边框的颜色和宽度。

箭头的放置。·你可以通过编辑div.anythingSlider.back（用于左箭头）和div.anythingSlider.forward（用于右箭头）样式来控制将向后箭头和向前箭头放置在何处。此外，div.anythingSlider.arrow样式设置了两个箭头的某些基本样式，包括它们在幻灯片中间的位置。例如，如果你想要箭头靠近幻灯片的顶部，直接编辑div.anythingSlider.arrow样式并将top：50%更改为top：20%，或者直接使用诸如top：45px；的一个像素值。