快捷導(dǎo)航

基于Jquery制作的幻燈片圖集效果打包下載

更新時間：2011年02月12日 17:27:00 作者：

基于Jquery制作的幻燈片圖集效果，文章最后給出了打包下載地址，喜歡的朋友可以測試下。

待改進(jìn)部分
1.大圖可根據(jù)瀏覽器分辨率自動縮放，目前是按照固定的寬和高顯示，超出部分隱藏。
2.大圖現(xiàn)在是直接載入了所有，若圖片很多時，體驗不好?？筛臑楫惒郊虞d，或者延遲加載，這個可以用jquery控件lazyload實現(xiàn)。
3.縮略圖是根據(jù)上傳時設(shè)定的參數(shù)直接生成的，如果是豎形圖片，會出現(xiàn)被壓縮的情況。可以改為只顯示局部，超出部分隱藏。
4.縮略圖列表的滑動采用了jcarousellite插件，如果將幻燈片提取為插件的話，需要整合為一個。
5.目前大圖區(qū)域和縮略圖區(qū)域是相對獨立的，優(yōu)點是比較直觀，可以自行隨便更改顯示位置，缺點是HTML的代碼量較多，不像有些插件，只需要$("#ID")一下就可以了。
JS代碼

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var currentImage; 
var currentIndex = -1; 
//顯示大圖(參數(shù)index從0開始計數(shù)) 
function showImage(index) { 
//更新當(dāng)前圖片頁碼 
$(".CounterCurrent").html(index + 1); 
//隱藏或顯示向左向右鼠標(biāo)手勢 
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]; 
//隱藏當(dāng)前的圖 
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'); 
//設(shè)置向左向右鼠標(biāo)手勢區(qū)域的高度 
//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> 