基于Jquery制作的幻灯片图集效果打包下载

151 阅读 0 评论 100 点赞

我是靠谱客的博主英勇金针菇，最近开发中收集的这篇文章主要介绍基于Jquery制作的幻灯片图集效果打包下载，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

复制代码代码如下:

 
<script type="text/javascript"> 
var currentImage; 
var currentIndex = -1; 
//显示大图(参数index从0开始计数) 
function showImage(index) { 
//更新当前图片页码 
$(".CounterCurrent").html(index + 1); 
//隐藏或显示向左向右鼠标手势 
var len = $('#OriginalPic img').length; 
if (index == len - 1) { 
$("#aNext").hide(); 
} 
else { 
$("#aNext").show(); 
} 
if (index == 0) { 
$("#aPrev").hide(); 
} 
else { 
$("#aPrev").show(); 
} 
//显示大图 
if (index < $('#OriginalPic img').length) { 
var indexImage = $('#OriginalPic p')[index]; 
//隐藏当前的图 
if (currentImage) { 
if (currentImage != indexImage) { 
$(currentImage).css('z-index', 2); 
$(currentImage).fadeOut(0, function () { 
$(this).css({ 'display': 'none', 'z-index': 1 }) 
}); 
} 
} 
//显示用户选择的图 
$(indexImage).show().css({ 'opacity': 0.4 }); 
$(indexImage).animate({ opacity: 1 }, { duration: 200 }); 
//更新变量 
currentImage = indexImage; 
currentIndex = index; 
//移除并添加高亮 
$('#ThumbPic img').removeClass('active'); 
$($('#ThumbPic img')[index]).addClass('active'); 
//设置向左向右鼠标手势区域的高度 
//var tempHeight = $($('#OriginalPic img')[index]).height(); 
//$('#aPrev').height(tempHeight); 
//$('#aNext').height(tempHeight); 
} 
} 
//下一张 
function ShowNext() { 
var len = $('#OriginalPic img').length; 
var next = currentIndex < (len - 1) ? currentIndex + 1 : 0; 
showImage(next); 
} 
//上一张 
function ShowPrep() { 
var len = $('#OriginalPic img').length; 
var next = currentIndex == 0 ? (len - 1) : currentIndex - 1; 
showImage(next); 
} 
//下一张事件 
$("#aNext").click(function () { 
ShowNext(); 
if ($(".active").position().left >= 144 * 5) { 
$("#btnNext").click(); 
} 
}); 
//上一张事件 
$("#aPrev").click(function () { 
ShowPrep(); 
if ($(".active").position().left <= 144 * 5) { 
$("#btnPrev").click(); 
} 
}); 
//初始化事件 
$(".OriginalPicBorder").ready(function () { 
ShowNext(); 
//绑定缩略图点击事件 
$('#ThumbPic li').bind('click', function (e) { 
var count = $(this).attr('rel'); 
showImage(parseInt(count) - 1); 
}); 
}); 
</script> 