待改進部分
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>
在線演示:http://demo.jb51.net/js/2011/Gallery/index.html
打包下載:/201102/yuanma/Gallery_jb51.rar