首页 > 特效插件 > 滚动轮播 >  带缩略图的jQuery图片轮播代码正文

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

特效介绍
Query图片轮播

    简单的带缩略图的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地址。