12、使用Cycle2插件创建幻灯片和滑块

使用Cycle2插件创建幻灯片和滑块

1. Cycle2插件简介

Cycle2插件功能强大且灵活，不仅能创建简单的幻灯片，还能创建一次显示多张图片的轮播图。接下来将详细介绍如何使用Cycle2插件创建缩略图轮播图以及如何将轮播图与幻灯片结合使用。

2. 创建Cycle2轮播图

2.1 准备HTML标记

首先，设置轮播图的HTML标记，与之前幻灯片示例的标记类似，但更简单，由于使用缩略图，无需文本覆盖层，可跳过相关额外数据属性。示例代码如下：

<div class="cycle-slideshow">
  <div class="slide">
    <a href="http://en.wikipedia.org/wiki/Agua_Azul">
      <img src="images/AguaAzul.jpg">
    </a>
  </div>
  <div class="slide">
    <a href="http://en.wikipedia.org/wiki/Burney_Falls">
      <img src="images/BurneyFalls.jpg">
    </a>
  </div>
  <div class="slide">
    <a href="http://en.wikipedia.org/wiki/Deer_Leap_Falls">
      <img sr