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);
}
