在 Drupal 7 中创建幻灯片（slideshow）和 jQuery 轮播（carousel）。第 2 部分

在上一部分课程中，我们已经创建了一个幻灯片（slideshow）。我使用它来展示组织的员工，而您也可以将其用作网站的横幅（banner）。不过，这种默认的方案还不够理想——我希望为网站添加“上一张”和“下一张”的切换按钮。与普通的文本或数字分页器相比，这样的按钮看起来更加美观。

提醒一下，我们已经安装了 Views 和 Views_slideshow 模块。

接下来，我附上了几种箭头样式，我们将把它们放入我们的幻灯片中。首先，添加一个文本切换器（pager）。

现在，幻灯片切换器应显示“下一张（Next）”和“上一张（Previous）”两个按钮。

按钮的设计思路如下：通过 CSS 为 “next” 和 “previous” 链接设置背景图（即箭头图像），然后再利用 CSS 将它们定位到页面合适的位置。

为了方便调试，我们需要一个 Firefox 插件 —— FireBug。它提供了查看和实时编辑 CSS 的工具。例如，下图展示了通过 FireBug 看到的切换按钮块结构：

我们需要记录元素的 id，因为稍后会通过这些 id 来编写 CSS。还需要将箭头图标文件复制到您主题的 images 文件夹中。

将箭头图标复制到主题的 images 文件夹后，打开主题的 style.css 文件，并添加如下样式：

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png'); /* 左箭头图片 */
    width: 30px; /* 箭头宽度 */
    height: 0px; /* 高度设为 0 */
    padding-top: 30px; /* 与宽度相同的间距 */
    position: relative; /* 相对定位 */
    top: 0px; /* 距顶部的偏移 */
    overflow: hidden;
    z-index: 5; /* 位于幻灯片之上 */
    display: block; /* 以块状显示 */
}

其中 a 表示链接标签，# 表示按 id 选择器匹配相应元素。

右箭头（next）的样式略有不同：

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

我们还可以完全隐藏“暂停（pause）”按钮：

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

通过 FireBug 微调 padding 和 position 的数值，并将最终版本保存到 style.css 中。以下是我最终使用的 CSS：

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

大功告成！横幅幻灯片已经准备好了。在下一部分中，我们将创建一个 jQuery 轮播（carousel）。