Javascript/JQuery产品多图切换与图片放大代码收藏

图片切换于放大
效果:多图切换与图片放大

图片切换于放大
以下是代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

$(document).ready(function(){
var photo=document.getElementById('photo');
var image1=new Image();
var image2=new Image();
image1.src=photo.getElementsByTagName('img')[0].src; //原始尺寸
image2.src=photo.getElementsByTagName('img')[1].src; //缩小尺寸
var scales=Math.round((image1.width/image2.width)*Math.pow(10,2))/Math.pow(10,2); //四舍五入取整 保留两位小数,放大率

$("#photo .prev").click(function() {
var total_num = parseInt($('#photo_list .li').length);
var num = parseInt($("#photo .prev").attr('num'));
if(num == 0){
if(total_num > 4){
$("#photo_list .li:first").before($("#photo_list .li:last")); //把最后一个元素移动到最前面
var currency_num = 0;
}else{
var currency_num = total_num - 1;
}
}else if(num > 0 && num < 4){
var currency_num = num - 1;
}else{
var currency_num = 3;
}

$("#photo .prev").attr('num',currency_num);
$("#photo_list .hover").removeClass("hover");
var current = $('#photo_list').find(".li").eq(currency_num);
$(current).addClass("hover");
do_image_change(current);
});

$("#photo .next").click(function() {
var total_num = parseInt($('#photo_list .li').length);
var num = parseInt($("#photo .prev").attr('num'));
if(num >= (total_num - 1) || (total_num > 4 && num ==3) ){
if(total_num > 4 && num == 3){
$("#photo_list .li:last").after($("#photo_list .li:first"));
var currency_num = 3;
}else{
var currency_num = 0;
}
}else if(num >= 0 && num < 3){
var currency_num = num + 1;
}else{
var currency_num = 0;
}
$("#photo .prev").attr('num',currency_num);
$("#photo_list .hover").removeClass("hover");
var current = $('#photo_list').find(".li").eq(currency_num);
$(current).addClass("hover");
do_image_change(current);
});

//放大镜
if(image2.width==0 && image2.height==0){ //图片没有完成加载,等待加载完毕后再显示
image2.onload=function(){
$("#photo .browser").css("display","block");
$("#map").css("display","block");
magnifier.init({
cont : document.getElementById('photo'),
img : document.getElementById('magnifier_img'),
mag : document.getElementById('map'),
scale : 2
});
}
}else{
$("#photo .browser").css("display","block");
$("#map").css("display","block");
magnifier.init({
cont : document.getElementById('photo'),
img : document.getElementById('magnifier_img'),
mag : document.getElementById('map'),
scale : 2
});
}

$("#photo_list .li").click(function() {
var total_num = parseInt($('#photo_list .li').length);
for(var i=0; i<total_num; i++){
if($("#photo_list .li").eq(i).find("img").attr("imgb") == $(this).find("img").attr("imgb")){
$("#photo .prev").attr('num',i);
break;
}
}
$("#photo_list .hover").removeClass("hover");
$(this).addClass("hover");
do_image_change(this);
});

function do_image_change(current){
var photo=document.getElementById('photo');
$('#magnifier_img').attr('src',''); //放大的图
$('#photo .original_img').attr('src',''); //原始图
$('#map').css('border','0'); //放大图的容器

var src = $(current).find("img").attr("imgb");
var bigimgSrc = $(current).find("img").attr("bigimg");
$('#photo .link_image').attr('src',bigimgSrc); // 中尺寸
$('#photo .original_img').attr('src',src); // 大尺寸 原始

var image3=new Image();
image3.src=photo.getElementsByTagName('img')[0].src;
if(image3.width==0 && image3.height==0){
image3.onload=function(){
magnifier.init({
cont : document.getElementById('photo'),
img : document.getElementById('magnifier_img'),
mag : document.getElementById('map'),
scale : 2
});
}
}else{
magnifier.init({
cont : document.getElementById('photo'),
img : document.getElementById('magnifier_img'),
mag : document.getElementById('map'),
scale : 2
});
}
$('#map').css('border','1px solid #000');
}
})
坚持原创技术分享,您的支持将鼓励我继续创作!