• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  带缩略图的jQuery图片正文

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

作者:网页模板
大小:0.75MB
点击次数:
发布时间:2014-09-04 09:46
分享到:

特效介绍

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地址。
  • 本文标签:
  • jQuery图片轮播代码
TouchSlide——手机网站滑动特效插件
jQuerySlideX手风琴效果图片展示