js代碼

var img_index = 0;

var img_src = "";

$(function() {

//計算居中位置

var mg_top = ((parseInt($(window).height()) - parseInt($(".photo-div").height())) / 2);

$(".photo-div").css({

"margin-top": "" + mg_top + "px"

});

//關閉

$(".photo-close").click(function() {

$(".photo-mask").hide();

$(".photo-panel").hide();

});

//下一張

$(".photo-panel .photo-div .arrow-next").click(function() {

img_index++;

if(img_index >= $(".demo li img").length) {

img_index = 0;

}

img_src = $(".demo li img").eq(img_index).attr("src");

photoView($(".demo li img"));

});

//上一張

$(".photo-panel .photo-div .arrow-prv").click(function() {

img_index--;

if(img_index < 0) {

img_index = $(".demo li img").length - 1;

}

img_src = $(".demo li img").eq(img_index).attr("src");

photoView($(".demo li img"));

});

//如何調用？

$(".demo li img").click(function() {

$(".photo-mask").show();

$(".photo-panel").show();

img_src = $(this).attr("src");

img_index = $(this).index();

photoView($(this));

});

});

//自適應預覽

function photoView(obj) {

if($(obj).width() >= $(obj).height()) {

$(".photo-panel .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");

$(".photo-panel .photo-div .photo-img .photo-view-w img").attr("src", img_src);

} else {

$(".photo-panel .photo-div .photo-img .photo-view-w").attr("class", "photo-view-h");

$(".photo-panel .photo-div .photo-img .photo-view-h img").attr("src", img_src);

}

//此處寫調試日志

console.log(img_index);

}

總結

以上是生活随笔為你收集整理的html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。