使用views slideshow模块可以实现多种形式的幻灯片，下面我介绍一下通过结合使用views模块，views slideshow模块 还有部分的CSS样式代码来实现如下的三种形式的幻灯片，有什么不到之处，希望各位大神指正。

1. 鼠标滑过缩略图可以切换幻灯片图片，同时支持幻灯片自动播放。效果如下图：

         2.幻灯片输出标题，并点击鼠标可以切换，同时支持幻灯片自动播放。效果如下图：

         3.幻灯片输出标题，简单介绍，并且鼠标滑动下方的色块切换幻灯片图片，同时支持幻灯片自动播放，效果如下图：

• 首先实现第一种形式的幻灯片。

1. 下载安装views (https://www.drupal.org/project/views); views slideshow(https://www.drupal.org/project/views_slideshow)模块，安装后启用这两个模块，如下图：

1. 创建一个views，并且格式选择幻灯片(slideshow),然后添加两个相同的图片字段，总体设置如下图：

1. 首先我们去设置第一个图像字段，这个字段我们用来显示大图。我们为了使我们的幻灯片图片整齐，我们去创建一个图片大小格式。访问: admin/config/media/image-styles 去创建图像样式，选择添加样式（比如我添加了一个名称为beautiful的样式），然后添加一个效果，一般选择“比例缩放并裁切”，随后填写自己需要的图片高度和宽度。如下图：然后我们回到刚才添加的views页面，对字段下面的第一个图像字段做如下的设置，在图像样式选择我们刚才创建的图像样式（比如我创建的beautiful样式）。

1. 同样我们为幻灯片中的缩略图创建图像样式，和上步的方法一样，并且在views 字段下面第二个图像字段选择创建的图像样式，如下图所示:

1. 下面到了views slideshow最关键的一步设置，views界面下的格式下面的幻灯片 设置会进入到下面的界面，并做如下的设置并保存：

         6. 为了定制输出幻灯片，我们需要自己写一部分CSS样式，如我写的一部分CSS样式。 

             源代码：

       CSS部分代码:

.beauty{width: 1000px; height: 530px; margin:0 auto; background-color: #ffffff; margin-top: 50px;}
.beauty_slideshow{ width: 990px; height: 520px; margin-left: 5px;margin-top: 5px;  float: left;}
.beauty_slideshow .skin-default{position:relative;}
.beauty_slideshow .views-slideshow-controls-bottom{position: absolute; bottom: 370px; padding-left:5px;left: 80px; z-index: 10; background-color: rgba(0,0,0,0.5); width:410px; height:80px;}
.beauty_slideshow .views_slideshow_pager_field_item{cursor: pointer;float: left;margin-top: 2px;}
.beauty_slideshow .views_slideshow_pager_field_item.active{margin-top: 0px;float: left;}
.beauty_slideshow .views_slideshow_pager_field_item.active img{border:3px solid #b3d06a;}

• 其次实现第二种形式的幻灯片。

1. 创建一个views，总体设置如下图所示：

1. 如形式一中一样创建一个此幻灯片的图像样式，具体步骤不在赘述，图像字段的具体如下:

1. 标题字段如下设置:

1. 下面到了views slideshow最关键的一步设置，views界面下的格式下面的幻灯片 设置会进入到下面的界面，并做如下的设置并保存：

1. 然后我们去翻译页面把幻灯片上的上一页，下一页换成左右按钮，

           链接:admin/config/regional/translate/translate,进入到这个界面后搜索：Previous,如下图:

进入编辑界面后将” Previous”翻译成” ‹”如下图:

同样的道理搜索”Next”,并将其翻译成” ›”如下图:

1. 为了定制输出幻灯片，我们需要自己写一部分CSS样式，如我写的一部分CSS样式。

             源代码:

部分CSS代码:

.front_slideshow{float: left;}
.front_slideshow .skin-default{position: relative;}
.front_slideshow  .views-slideshow-controls-bottom {position: absolute;bottom: 0px;padding:10px;left: 0;z-index: 10;width: 655px;}
.front_slideshow .views-slideshow-controls-text-previous a
,.front_slideshow .views-slideshow-controls-text-next a{position: absolute;top:-170px;width: 50px;height: 50px;margin-top: -20px;font-size: 80px;font-weight: 100;line-height: 40px;color: white;text-align: center;background-color: black;-webkit-border-radius: 23px;-moz-border-radius: 23px;opacity: 0.5;filter:alpha(opacity=50);font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
.front_slideshow .views-slideshow-controls-text-next a{right: 15px;left: auto;}
.front_slideshow .views-slideshow-controls-text-previous a:hover
,.front_slideshow .views-slideshow-controls-text-next a:hover{color: white;text-decoration: none;opacity: 0.9;filter:alpha(opacity=90);}
.front_slideshow .views-slideshow-controls-text-pause{display: none;}
.front_slideshow .views-slideshow-controls-text-pause a{color: #fff;opacity: 0.5;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;background: #222;border: 2px solid white;padding: 3px; font-size: 12px;}
.front_slideshow .views-slideshow-controls-text-pause a:hover{color: white;text-decoration: none;;opacity: 0.9;filter:alpha(opacity=90);}
.front_slideshow  .slideshow_title{ width:100%; position:absolute; bottom:0px; left:0px; z-index:10; height:34px; background:rgba(0,0,0,0.5);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#80000000',endColorstr = '#80000000')\9;  display:block; line-height:34px; text-align:left; }
.front_slideshow .slideshow_title a{display: block;font-size: 14px;font-weight: bold;color: white; margin-left: 10px; float: left;}

• 最后实现第三种形式的幻灯片。（明天再补充上）