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