简单带缩略图的jquery轮播图插件

这是一款简单带缩略图的jquery轮播图插件。该轮播图插件默认底部带有缩略图效果，支持ie8浏览器，并带平滑过渡效果。

使用方法

在页面中引入样式文件style.css，以及jquery和jqueryPhoto文件。

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/jqueryPhoto.js"></script>
                

HTML结构

该jquery轮播图的基本HTML结构如下：

<div class="mod18">
  <span id="prev" class="btn prev"></span>
  <span id="next" class="btn next"></span>
  <span id="prevTop" class="btn prev"></span>
  <span id="nextTop" class="btn next"></span>
  <div id="picBox" class="picBox">
    <ul class="cf">
      <li> <a href="#"><img src="images/83293306.jpg" alt=""></a> <span>轮播图图片描述信息-1</span> </li>
      <li> <a href="#"><img src="images/83293260.jpg" alt=""></a> <span>轮播图图片描述信息-2</span> </li>
      <li> <a href="#"><img src="images/83293278.jpg" alt=""></a> <span>轮播图图片描述信息-3</span> </li>
      <li> <a href="#"><img src="images/83293291.jpg" alt=""></a> <span>轮播图图片描述信息-4</span> </li>
      <li> <a href="#"><img src="images/83293300.jpg" alt=""></a> <span>轮播图图片描述信息-5</span> </li>
      <li> <a href="#"><img src="images/83293339.jpg" alt=""></a> <span>轮播图图片描述信息-6</span> </li>
      <li> <a href="#"><img src="images/83293353.jpg" alt=""></a> <span>轮播图图片描述信息-14</span> </li>
      <li> <a href="#"><img src="images/83293410.jpg" alt=""></a> <span>轮播图图片描述信息-7</span> </li>
      <li> <a href="#"><img src="images/83293412.jpg" alt=""></a> <span>轮播图图片描述信息-8</span> </li>
      <li> <a href="#"><img src="images/83293418.jpg" alt=""></a> <span>轮播图图片描述信息-9</span> </li>
      <li> <a href="#"><img src="images/83293442.jpg" alt=""></a> <span>轮播图图片描述信息-10</span> </li>
      <li> <a href="#"><img src="images/83293447.jpg" alt=""></a> <span>轮播图图片描述信息-11</span> </li>
      <li> <a href="#"><img src="images/83293458.jpg" alt=""></a> <span>轮播图图片描述信息-12</span> </li>
      <li> <a href="#"><img src="images/83293493.jpg" alt=""></a> <span>轮播图图片描述信息-13</span> </li>
    </ul>
  </div>
  <div id="listBox" class="listBox">
    <ul class="cf">
      <li class="on"><i class="arr2"></i><img src="images/83293792.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293780.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293781.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293782.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293783.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293793.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293794.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293795.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293809.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293810.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293811.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293812.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293831.jpg" alt=""></li>
      <li><i class="arr2"></i><img src="images/83293832.jpg" alt=""></li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
                

相关插件

js动感水平拖拽式轮播图特效

js扑克堆叠式卡片轮播图插件

js堆叠卡片轮播图插件stackedCards

jQuery和CSS3堆叠式轮播图特效