插件介绍
这是一款简单实用的jquery带缩略图的轮播图代码。该轮播图在每张图片中都配有说明文字和缩略图，它实用简单，兼容ie8+的所有现代浏览器。

使用方法

在页面中引入样式文件main.css和jquery、jquery.easing.min.js文件，以及轮播图js文件main.js。
<link rel=”stylesheet” type=”text/css” href=”css/main.css” />
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.easing.min.js”></script>
<script type=”text/javascript” src=”js/main.js”></script>

HTML结构
该轮播图的HTML结构如下。
<div class=”ag7-main”>
<div class=”ag7-bannerslide”>
<ul class=”slidebox”>
<li><a href=”#” target=”_blank”><img alt=”百元档激斗” src=”images/big1.jpg” ></a></li>
<li><a href=”#” target=”_blank”><img alt=”天生美颜” src=”images/big2.jpg” ></a></li>
<li><a href=”#” target=”_blank  “><img alt=”4G全网通” src=”images/big3.jpg” ></a></li>
<li><a href=”#” target=”_blank  “><img alt=”你弯了吗？” src=”images/big4.jpg” ></a></li>
</ul>
<div class=”slideinfo”>
<div class=”slidetitle”>
<h2></h2>
<h3></h3>
</div>
<div class=”slidelist”>
<ul>
<li data-h1=”百元档激斗” data-h2=”小米 /bong2 /37度手环对比评测视频”>
<img width=”50″ height=”22″ src=”images/s1.jpg” alt=””>
</li>
<li data-h1=”天生美颜” data-h2=”美图 M4 智能手机体验视频”>
<img width=”50″ height=”22″ src=”images/s2.jpg” alt=””>
</li>
<li data-h1=”4G全网通” data-h2=”三星Galaxy S6 edge零售版首发体验视频”>
<img width=”50″ height=”22″ src=”images/s3.jpg” alt=””>
</li>
<li data-h1=”你弯了吗？” data-h2=”LG G Flex2上手体验视频”>
<img width=”50″ height=”22″ src=”images/s4.jpg” alt=””>
</li>
</ul>
<span class=”mask”></span>
</div>
</div>
</div>
</div>

初始化插件
在页面DOM元素加载完毕置换后，通过下面的方法来初始化该轮播图插件。
$(function(){
bannerSlide();
kuaixun();
});

在线预览 网盘下载

网盘下载密码：r5gt