H5全屏手风琴幻灯片切换特效

H5全屏手风琴幻灯片切换特效是一款全屏的手风琴菜单滑动图片切换特效。

下载

待改进部分
1.大图可根据浏览器分辨率自动缩放，目前是按照固定的宽和高显示，超出部分隐藏。
2.大图现在是直接载入了所有，若图片很多时，体验不好。可改为异步加载，或者延迟加载，这个可以用jquery控件lazyload实现。
3.缩略图是根据上传时设定的参数直接生成的，如果是竖形图片，会出现被压缩的情况。可以改为只显示局部，超出部分隐藏。
4.缩略图列表的滑动采用了jcarousellite插件，如果将幻灯片提取为插件的话，需要整合为一个。
5.目前大图区域和缩略图区域是相对独立的，优点是比较直观，可以自行随便更改显示位置，缺点是html的代码量较多，不像有些插件，只需要$("#id")一下就可以了。
js代码

复制代码 代码如下:

<script type="text/javascript"> <BR>var currentImage; <BR>var currentIndex = -1; <BR>//&#26174;&#31034;&#22823;&#22270;(&#21442;&#25968;index&#20174;0&#24320;&#22987;&#35745;&#25968;) <BR>function showImage(index) { <BR>//&#26356;&#26032;&#24403;&#21069;&#22270;&#29255;&#39029;&#30721; <BR>$(".CounterCurrent").html(index + 1); <BR>//&#38544;&#34255;&#25110;&#26174;&#31034;&#21521;&#24038;&#21521;&#21491;&#40736;&#26631;&#25163;&#21183; <BR>var len = $('#OriginalPic img').length; <BR>if (index == len - 1) { <BR>$("#aNext").hide(); <BR>} <BR>else { <BR>$("#aNext").show(); <BR>} <BR>if (index == 0) { <BR>$("#aPrev").hide(); <BR>} <BR>else { <BR>$("#aPrev").show(); <BR>} <BR>//&#26174;&#31034;&#22823;&#22270; <BR>if (index < $('#OriginalPic img').length) { <BR>var indexImage = $('#OriginalPic p')[index]; <BR>//&#38544;&#34255;&#24403;&#21069;&#30340;&#22270; <BR>if (currentImage) { <BR>if (currentImage != indexImage) { <BR>$(currentImage).css('z-index', 2); <BR>$(currentImage).fadeOut(0, function () { <BR>$(this).css({ 'display': 'none', 'z-index': 1 }) <BR>}); <BR>} <BR>} <BR>//&#26174;&#31034;&#29992;&#25143;&#36873;&#25321;&#30340;&#22270; <BR>$(indexImage).show().css({ 'opacity': 0.4 }); <BR>$(indexImage).animate({ opacity: 1 }, { duration: 200 }); <BR>//&#26356;&#26032;&#21464;&#37327; <BR>currentImage = indexImage; <BR>currentIndex = index; <BR>//&#31227;&#38500;&#24182;&#28155;&#21152;&#39640;&#20142; <BR>$('#ThumbPic img').removeClass('active'); <BR>$($('#ThumbPic img')[index]).addClass('active'); <BR>//&#35774;&#32622;&#21521;&#24038;&#21521;&#21491;&#40736;&#26631;&#25163;&#21183;&#21306;&#22495;&#30340;&#39640;&#24230; <BR>//var tempHeight = $($('#OriginalPic img')[index]).height(); <BR>//$('#aPrev').height(tempHeight); <BR>//$('#aNext').height(tempHeight); <BR>} <BR>} <BR>//&#19979;&#19968;&#24352; <BR>function ShowNext() { <BR>var len = $('#OriginalPic img').length; <BR>var next = currentIndex < (len - 1) ? currentIndex + 1 : 0; <BR>showImage(next); <BR>} <BR>//&#19978;&#19968;&#24352; <BR>function ShowPrep() { <BR>var len = $('#OriginalPic img').length; <BR>var next = currentIndex == 0 ? (len - 1) : currentIndex - 1; <BR>showImage(next); <BR>} <BR>//&#19979;&#19968;&#24352;&#20107;&#20214; <BR>$("#aNext").click(function () { <BR>ShowNext(); <BR>if ($(".active").position().left >= 144 * 5) { <BR>$("#btnNext").click(); <BR>} <BR>}); <BR>//&#19978;&#19968;&#24352;&#20107;&#20214; <BR>$("#aPrev").click(function () { <BR>ShowPrep(); <BR>if ($(".active").position().left <= 144 * 5) { <BR>$("#btnPrev").click(); <BR>} <BR>}); <BR>//&#21021;&#22987;&#21270;&#20107;&#20214; <BR>$(".OriginalPicBorder").ready(function () { <BR>ShowNext(); <BR>//&#32465;&#23450;&#32553;&#30053;&#22270;&#28857;&#20987;&#20107;&#20214; <BR>$('#ThumbPic li').bind('click', function (e) { <BR>var count = $(this).attr('rel'); <BR>showImage(parseInt(count) - 1); <BR>}); <BR>}); <BR></script>

在线演示:http://demo.jb51.net/js/2011/Gallery/index.html
打包下载:/201102/yuanma/Gallery_jb51.rar