一、插件介绍
幻灯片切换的时候，往往形式多种多样，鼠标移上去显示大图，而且显示图片的介绍，这是一款非常好的插件。如图：
二、插件作者及下载
插件作者及官网：很抱歉没有在各方面的资料中找到这款插件的介绍。
插件下载地址： http://www.ijquery.cn/js/jquery.PicSlide.js
三、参数
| 参数名 | 默认值 | 释义说明 |
|---|---|---|
| id | 无 | DIV的ID层 |
| way | left | 滑块的移动方向，其实这里只有一个left，插件中有top，但是不能用。 |
| interval | 4000 | 切换频率，这里为4秒 |
四、最简使用教程
1、HTML代码：
<!-- start --> <div class="slide" id="PicSlide"> <!--大图--> <ul class="img"> <li style="display: list-item;"><a href="#" target="_blank" title=""><img src="images/01.jpg" width="640" height="360" alt="当地时间9月15日，执行“和谐使命—2010”任务的中国“和平方舟”号医院船航行5300余海里驶抵亚丁湾。2天后，医院船将与正在亚丁湾海域执行护航任务的中国海军第六批舰艇编队会合，展开全方位的医疗服务。" data-pinit="registered"></a></li> <li class="hidden" style="display: none;"><a href="#" target="_blank" title=""><img src="images/02.jpg" width="640" height="360" alt="美国自然历史博物馆幕后鲜为人知的工作- " data-pinit="registered"></a></li> <li class="hidden" style="display: none;"><a href="#" target="_blank" title=""><img src="images/03.jpg" width="640" height="360" alt="越南19日连续第三个周末发生反华抗议，一些示威者喊出“打倒中国”之类的激烈口号。在对示威管控严密的越南，这种连续公开抗议被认为非常罕见。与中国 关系紧张之际，越南又向美国靠了一步，两国17日发表共同声明，呼吁南海“航行自由”，并探讨把双方关系提升到“战略级”。" data-pinit="registered"></a></li> <li class="hidden" style="display: none;"><a href="#" target="_blank" title=" "><img src="images/04.jpg" width="640" height="360" alt="9月17日，北京市区晚高峰拥堵路段峰值超140条，已经超过今年年初因大雪造成90余条拥堵路段峰值的纪录。" data-pinit="registered"></a></li> <li class="hidden" style="display: none;"><a href="#" target="_blank" title=""><img src="images/05.jpg" width="640" height="360" alt="国家公务员招录公共科目笔试开考，今年考生超过140万，将竞争137个招考单位的1.6万余岗位，平均竞争比达到88比1。据统计，今年是笔试资格审核考生人数连续第3年突破百万人，而2003年这一数字仅为8.7万。" data-pinit="registered"></a></li> </ul> <!-- 标题区 --> <div class="title"> <p class="h3 pos-a"><a title href="#">当地时间9月15日，执行“和谐使命—2010”任务的中国“和平方舟”号医院船航行5300余海里驶抵亚丁湾。2天后，医院船将与正在亚丁湾海域执行护航任务的中国海军第六批舰艇编队会合，展开全方位的医疗服务。</a></p> <div class="shadow"> </div> </div> <!-- 缩略图 --> <div class="thumb"> <ul> <li><a href="#" target="_blank" title=""><img src="images/01s.jpg" width="120" height="60" alt=""></a></li> <li><a href="#" target="_blank" title=""><img src="images/02s.jpg" width="120" height="60" alt=""></a></li> <li><a href="#" target="_blank" title=""><img src="images/03s.jpg" width="120" height="60" alt=""></a></li> <li><a href="#" target="_blank" title=""><img src="images/04s.jpg" width="120" height="60" alt=""></a></li> <li><a href="#" target="_blank" title=""><img src="images/05s.jpg" width="120" height="60" alt=""></a></li> </ul> <!--滑块儿--> <div class="now-status" style="left: 0px;"></div> </div> </div> <!-- end -->
2、JS代码：
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.PicSlide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//幻灯片调用
slider.init({'id': $('#PicSlide'), way:'left', interval: 4000});
});
</script>
3、CSS代码：
/*幻灯片*/
.slide{width:640px;height:430px;position:relative;margin:0 auto;}
#PicSlide{width:640px;overflow:hidden;_zoom:1;height:430px;}
#PicSlide .img{height:360px;overflow:hidden;_zoom:1;}
#PicSlide .title{bottom:70px;width:100%;position:absolute;}
#PicSlide .shadow{background-color:#000;opacity:.5;filter:alpha(opacity=50);height:70px;}
#PicSlide .title .h3{z-index:30;line-height:20px;margin:4px 10px 0 10px;}
#PicSlide .title .h3 a{font-weight:normal;font-size:12px;color:#fff;}
#PicSlide .thumb{bottom:0;left:0;position:absolute;overflow:hidden;_zoom:1;height:70px;}
#PicSlide .thumb ul{z-index:20;width:660px;overflow:hidden;_zoom:1;margin-top:10px;}
#PicSlide .thumb li{width:120px;height:60px;margin-right:10px;float:left;_display:inline;}
#PicSlide .thumb .now-status{position:absolute;width:130px;height:20px;background:url(../images/slider-ico.png) no-repeat 0 0;z-index:-1;top:0;left:0;}