jquery带缩略图的轮播图代码

这是一款简单实用的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();
});