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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > 简单带缩略图的jquery轮播图插件
简单带缩略图的jquery轮播图插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-09-12
    阅读:
麦子学院
简要教程

这是一款简单带缩略图的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>
                

网友评论