分享一款基于jqery的带3D切换效果的图片展示

　　先看效果：在线演示。

　　这个效果并不是我想出来的，我只是对某个开源的flash图片展示（请原谅我并不知道原作的链接……）使用js重写罢了。

　　起因是，我所在学校的网站（相思湖网站）要进行改版，其中各专题首页需要一个图片展示。某成员找到了一个带3D切换效果的图片展示，可惜是flash做的，并且在使用的过程中有一个问题，如果图片的宽高与原始定义的不同，就会出现一个固定的白框。

　　当时我的第一反应就是为什么要flash？难道js做不到么？话虽如此，但如果可以改改代码就能解决的话，倒也省事。终归我过于乐观了，尽管as和js是近亲，我却总抓不住问题的关键所在，一部分是因为对flash的不熟悉，令一部分也因为那as代码写得也够凌乱的。总之我决定了要用js重写。

　　仔细想想这个效果并不很难实现，借助jquery的animation可以轻松实现节点元素的各种动画，唯一的难点是确定图片的位置而已了。

　　我是利用等比对折来确定图片的位置：　　

　　css

.xsh_slider {
padding: 0;
list-style: none;
overflow: hidden;
position: relative;
}
.xsh_slider li {
position: absolute;
overflow: hidden;
opacity: 0;
filter: alpha(opacity = 0);
}
.xsh_slider .alt {
position: absolute;
bottom: 0;
display: none;
}
.xsh_slider img {
border: none;
}
.xsh_slider .pre_img, .xsh_slider .next_img {
z-index: 1;
cursor: pointer;
}
.xsh_slider .cur_img {
z-index: 2;
}
.xsh_slider .btn_pre, .xsh_slider .btn_next {
position: absolute;
cursor: pointer;
}
.xsh_slider .btn_pre {
left: 0;
}
.xsh_slider .btn_next {
right: 0;
}

　　惭愧的说，代码写得不怎么样，纯粹面向过程写法。

　　最后附上下载：xsh_slide.7z