jquery 鼠标触发，抽屉式幻灯片左右切换 - 图片展开收缩代码

《jquery 鼠标触发，抽屉式幻灯片左右切换 - 图片展开收缩代码》正文开始，本次阅读大概7分钟。

使用jquery方法，实现抽屉式的图片左右切换展开收缩代码，特效非常绚丽！

!DOCTYPEhtml
html
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titleSWFamily/title
styletype=text/css
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180%Arial,Helvetica,sans-serif,新宋体;}
.pic{width:1100px;height:430px;margin:70pxauto0;}
.piculli{list-style:none;width:100px;height:429px;float:left;}
.pic.l1{background-image:url(img/1.jpg);}
.pic.l2{background-image:url(img/2.jpg);}
.pic.l3{background-image:url(img/3.jpg);}
.pic.l4{background-image:url(img/4.jpg);width:789px;}
.txt{width:100px;height:429px;background:#000;filter:alpha(opacity=50);background:rgba(0,0,0,.5);}
.txtp{color:#fff;font-family:微软雅黑;float:left;position:relative;}
.txt.p1{font-size:12px;width:12px;margin:25px25px020px;}
.txt.p2{font-size:14px;width:14px;margin-top:25px;}
/style
/head
body
divclass=pic
	ul
liclass=l1
ahref=http://www.17sucai.com/target=_blank
divclass=txt
pclass=p1作者：默默的墨墨/p
pclass=p2我的个人拉萨之旅｜｜故事之城/p
/div
/a
/li
liclass=l2
ahref=http://www.17sucai.com/target=_blank
divclass=txt
pclass=p1作者：默默的墨墨/p
pclass=p2我的个人拉萨之旅｜｜故事之城/p
/div
/a
/li
liclass=l3
ahref=http://www.17sucai.com/target=_blank
divclass=txt
pclass=p1作者：默默的墨墨/p
pclass=p2我的个人拉萨之旅｜｜故事之城/p
/div
/a
/li
liclass=l4
ahref=http://www.17sucai.com/target=_blank
divclass=txt
pclass=p1作者：默默的墨墨/p
pclass=p2我的个人拉萨之旅｜｜故事之城/p
/div
/a
/li
	/ul
/div
scripttype=text/javascriptsrc=js/jquery.js/script
scripttype=text/javascript
$(.piculli).hover(function(){
	$(this).stop(true).animate({width:789px},500).siblings().stop(true).animate({width:100px},500);
});
/script
/body
/html

这种方法的JS代码非常简单，特效也非常好看，适合比较宽屏的轮播或者幻灯片使用！