jQuery写的抽屉式图片展示效果
使用方法：
1.引用样式文件css/lrtk.css
2.引用jquery的库文件js/jquery.js
3.引用效果的具体js代码文件js/index_slide.js和下面的script代码复制至html文件中。
4.将class为kwicks的DIV的内容复制到您的html文件
<!DOCTYPE html>
<html>
<head>
<title>{title}_源码搜藏</title>
<link type="text/css" rel="stylesheet" href="css/lrtk.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="images/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/index_slide.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max:400,//控制.extension区块的宽度
spacing:10//控制图片之间的距离
});
});
</script>
<body>
<div class="box">
<!--代码开始-->
<ul class="kwicks">
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/01.gif"></a>
<div class="extension" style="background-image:url(images/star_1.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Everything's Getting Older</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Aidan Moffat</a></dd>
<dd>2011</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>1星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/02.jpg"></a>
<div class="extension" style="background-image:url(images/star_5.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Minsk</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Concerto for Constantine</a></dd>
<dd>2008</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>5星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/03.jpg"></a>
<div class="extension" style="background-image:url(images/star_2.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">A+E</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Graham Coxon</a></dd>
<dd>2012</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>2星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/04.jpg"></a>
<div class="extension" style="background-image:url(images/star_4.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Lullaby</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">James Walsh</a></dd>
<dd>2012</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>4星</span>
</div>
</div>
</li>
<li>
<a href="http://www.codesocang.com/" target="_blank"><img src="images/05.jpg"></a>
<div class="extension" style="background-image:url(images/star_3.gif);">
<dl>
<dt><a href="http://www.codesocang.com/" target="_blank">Wreckorder</a></dt>
<dd><a href="http://www.codesocang.com/" target="_blank">Fran Healy</a></dd>
<dd>2010</dd>
</dl>
<div class="meta">
<span><a href="http://www.codesocang.com/" target="_blank">Shoegazer</a> 评价</span>
<span>3星</span>
</div>
</div>
</li>
</ul>
<!--代码结束-->
</div>
<div style="font:normal 12px/2em '微软雅黑';text-align:center;margin:50px 0;">
<p>来源：<a href="http://www.codesocang.com/ " target="_blank">乐鼠无牙</a> 代码整理：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢：<a href="http://www.iseedy.com/" target="_blank">爱看电影网</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
兼容IE8的jQuery幻灯片切换代码
jQuery全屏banner图片切换焦点图简洁代码
基于slick幻灯片插件制作的一款jQuery背景图片切换效果
jQuery带视觉差效果幻灯片代码
jQuery多种切片过渡动画幻灯片代码