前端技术文档及相关资料下载
关于前端html、css、js等技术上的各种疑难棘手问题的解决方案探讨及相关资料下载！
JQuery带缩略图幻灯片插件PicSlide
简介
PicSlide是一款功能强大的、可制作带缩略图的幻灯片插件。
参数：
| 参数名 | 默认值 | 释义说明 |
|---|---|---|
| id | 无 | DIV的ID层 |
| way | left | 滑块的移动方向，其实这里只有一个left，插件中有top，但是不能用。 |
| interval | 4000 | 切换频率，这里为4秒 |
$.fn.slidePics.defaults = {
'width':'300px',//宽度
'height':'225px',//高度
'float':'none',//浮动特性
'lnkTxtAbovePic':true,//链接文字显示在图片之上.注意：如果为false则在图片地下显示链接文字，
此时，整个slider的高度会自动加上22个px，即其高度为opt.height + 22
'delay':5000,//播放间隔
'duration':500,//渐显间隔
'picDivID':'picBox',//图片所在DIV的ID
'indexDivID':'picIndex',//图片索引所在DIV的ID
'linkDivID':'picLink',//链接显示DIV的ID
'slideData':[],//以json对象的方式指定幻灯片数据,格式如:
[{'src':'images/xxx.jpg','href':'http://www.xxx.com','title':'访问下xxx.com','target':'_blank'},{...}]
'usePics':'htmldef',//使用哪个图片数据？jsondata（由slideData指定的数据）或者htmldef（在html标记中指定的数据）
或者both(同时使用这两项数据)
'effect':'none'//定义使用那种切换效果，为了提高性能，默认为无效果。可选："none","auto","fadein","rtl","ltr","bt","tb","ltrb","lbrt",
"rtlb","rblt","h","v","etc","cte", 还可以使用数字：-1为随机效果，等价auto,
其余取值于区间[0-13],使用bool值时，true为随机效果(random),false为无效果(none).
};
（下载的附件中带有DEMO）
使用
1. 引入 jquery.js 、 jquery.picSlider.css 和 jquery.picSlider.js 文件
2. HTML
<div id="picSlider">
<div id="picBox">
<ul>
<li><a href="#" title="奇特的扇形叶片，唯独是银杏"><img src="leaf.jpg" alt=""/></a></li>
<li><a href="#" title="落下的银杏叶片，依旧具有如此遒劲的纹理"><img src="yleaf.jpg" alt=""/></a></li>
<li><a href="#" title="青色的果实，累累的挂满枝头"><img src="greenfruit.jpg" alt=""/></a></li>
<li><a href="#" title="金果喜人，丰收在望"><img src="yellowfruit.jpg" alt=""/></a></li>
</ul>
</div>
<div id="picIndex"></div>
<div id="picLink"></div>
</div>3. 调用
var pics = [
{'src':'01.jpg','href':'#','title':'秋天的银杏树','taget':'_blank'},
{'src':'02.jpg','href':'#','title':'银杏行道树，秋天的金色','taget':'_blank'},
{'src':'fall.jpg','href':'#','title':'美丽的金秋吸引着人们','taget':'_blank'}
];
$(document).ready(function(){
$("#picSlider").slidePics({'width':334,'height':224,'slideData':pics,'usePics':'both','effect':-1
});
});