幻灯片/轮播

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

创客主机


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

使用方法

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

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

HTML结构

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

  1. <div class="mod18">
  2.   <span id="prev" class="btn prev"></span>
  3.   <span id="next" class="btn next"></span>
  4.   <span id="prevTop" class="btn prev"></span>
  5.   <span id="nextTop" class="btn next"></span>
  6.   <div id="picBox" class="picBox">
  7.     <ul class="cf">
  8.       <li> <a href="#"><img src="images/83293306.jpg" alt=""></a> <span>轮播图图片描述信息-1</span> </li>
  9.       <li> <a href="#"><img src="images/83293260.jpg" alt=""></a> <span>轮播图图片描述信息-2</span> </li>
  10.       <li> <a href="#"><img src="images/83293278.jpg" alt=""></a> <span>轮播图图片描述信息-3</span> </li>
  11.       <li> <a href="#"><img src="images/83293291.jpg" alt=""></a> <span>轮播图图片描述信息-4</span> </li>
  12.       <li> <a href="#"><img src="images/83293300.jpg" alt=""></a> <span>轮播图图片描述信息-5</span> </li>
  13.       <li> <a href="#"><img src="images/83293339.jpg" alt=""></a> <span>轮播图图片描述信息-6</span> </li>
  14.       <li> <a href="#"><img src="images/83293353.jpg" alt=""></a> <span>轮播图图片描述信息-14</span> </li>
  15.       <li> <a href="#"><img src="images/83293410.jpg" alt=""></a> <span>轮播图图片描述信息-7</span> </li>
  16.       <li> <a href="#"><img src="images/83293412.jpg" alt=""></a> <span>轮播图图片描述信息-8</span> </li>
  17.       <li> <a href="#"><img src="images/83293418.jpg" alt=""></a> <span>轮播图图片描述信息-9</span> </li>
  18.       <li> <a href="#"><img src="images/83293442.jpg" alt=""></a> <span>轮播图图片描述信息-10</span> </li>
  19.       <li> <a href="#"><img src="images/83293447.jpg" alt=""></a> <span>轮播图图片描述信息-11</span> </li>
  20.       <li> <a href="#"><img src="images/83293458.jpg" alt=""></a> <span>轮播图图片描述信息-12</span> </li>
  21.       <li> <a href="#"><img src="images/83293493.jpg" alt=""></a> <span>轮播图图片描述信息-13</span> </li>
  22.     </ul>
  23.   </div>
  24.   <div id="listBox" class="listBox">
  25.     <ul class="cf">
  26.       <li class="on"><i class="arr2"></i><img src="images/83293792.jpg" alt=""></li>
  27.       <li><i class="arr2"></i><img src="images/83293780.jpg" alt=""></li>
  28.       <li><i class="arr2"></i><img src="images/83293781.jpg" alt=""></li>
  29.       <li><i class="arr2"></i><img src="images/83293782.jpg" alt=""></li>
  30.       <li><i class="arr2"></i><img src="images/83293783.jpg" alt=""></li>
  31.       <li><i class="arr2"></i><img src="images/83293793.jpg" alt=""></li>
  32.       <li><i class="arr2"></i><img src="images/83293794.jpg" alt=""></li>
  33.       <li><i class="arr2"></i><img src="images/83293795.jpg" alt=""></li>
  34.       <li><i class="arr2"></i><img src="images/83293809.jpg" alt=""></li>
  35.       <li><i class="arr2"></i><img src="images/83293810.jpg" alt=""></li>
  36.       <li><i class="arr2"></i><img src="images/83293811.jpg" alt=""></li>
  37.       <li><i class="arr2"></i><img src="images/83293812.jpg" alt=""></li>
  38.       <li><i class="arr2"></i><img src="images/83293831.jpg" alt=""></li>
  39.       <li><i class="arr2"></i><img src="images/83293832.jpg" alt=""></li>
  40.     </ul>
  41.   </div>
  42.   <div class="clear"></div>
  43. </div>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!