带缩略图的jQuery图片轮播代码

    简单的带缩略图的jQuery图片轮播代码。切换采用的是淡入淡出效果。支持自动播放。 1、在head引入相关css、js文件和jQuery库

<link href="css/index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/5imoban.net.js"></script>

2、把以下代码拷贝到你想引用的地方

<div class="indexCon fl">
    <div class="flashBanner">
        <a href="http://www.5imoban.net/"><img class="bigImg" width="782" height="326" /></a>
        <div class="mask">
            <img src="images/201109291718425.jpg" uri="images/201109291718425.jpg" link="http://www.5imoban.net/"  width="60" height="22"/>
            <img src="images/201207261743282.jpg" uri="images/201207261743282.jpg" link="http://www.5imoban.net/"  width="60" height="22"/>
            <img src="images/201109291718573.jpg" uri="images/201109291718573.jpg" link="http://www.5imoban.net/"  width="60" height="22"/>
            <img src="images/201109291719040.jpg" uri="images/201109291719040.jpg" link="http://www.5imoban.net/"  width="60" height="22"/>
            <img src="images/201207311057406.jpg" uri="images/201207311057406.jpg" link="http://www.5imoban.net/"  width="60" height="22"/>
        </div>
    </div>
</div>

说明：

<img src="images/201109291718425.jpg" uri="images/201109291718425.jpg" link="http://www.5imoban.net/"  width="60" height="22"/>

上面的代码中，src指定的是缩略图，uri指定的是大图，link指定的是图片对应的URL地址。