本文实例为大家分享了jQuery实现查看图片的具体代码，供大家参考，具体内容如下
HTML
|
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
|
<!-- 放缩略图的div -->
<div class="sl">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>
<!-- 实现关灯的div -->
<div class="gd"></div>
<div class="yt">
<!-- 左翻按钮 -->
<div class="left">
<img src="images/left.png" alt="" width="100">
</div>
<div class="tp">
<!-- 展示原图 -->
<img src="images/1.jpg" class="show" />
<!--放开始和结束图片的盒子 -->
<div class="ss" style="display: none;">
<img src="images/start.png" alt="" width="50" class="start">
</div>
</div>
<!-- 右翻按钮 -->
<div class="right">
<img src="images/right.png" alt="" width="100">
</div>
</div>
|
CSS
|
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
|
html,body{
padding: 0;
margin: 0;
}
.sl img {
width: 300px;
}
.gd {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
z-index: 900;
display: none;
top: 0;
left: 0;
}
.sl {
position: absolute;
z-index: 888;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sl>img {
width: 25%;
}
.yt {
z-index: 990;
position: absolute;
display: none;
left: 500px;
top: 200px;
}
.tp {
margin: 0 20px;
}
.yt>div {
display: inline-block;
}
.left,
.right {
position: relative;
top: -110px;
cursor: pointer;
}
.ss {
position: relative;
width: 50px;
height: 50px;
left: 270px;
}
.start {
z-index: 990;
position: absolute;
}
|
JS
|
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
|
var max = $(".sl img").length;
$(function (e) {
var width = $(window).width();
var height = $(window).height();
$(".gd").css({
"height": height,
"width": width
});
//左翻按钮动画
$(".left").hover(
function () {
$(this).animate({
"left": "-10"
});
},
function () {
$(this).animate({
"left": "0"
});
}
);
//右翻按钮动画
$(".right").hover(
function () {
$(this).animate({
"right": "-10"
});
},
function () {
$(this).animate({
"right": "0"
});
}
);
//被点击的缩略图
$(".sl>img").click(function (e) {
$(".gd").show(500);
$(".yt").fadeIn(800);
var index = $(this).index(); //当前被点击图片的索引
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
//左翻
$(".left").click(function (e) {
if (index - 1 < 0) {
index = max - 1;
} else {
index = index - 1;
}
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
});
//右翻
$(".right").click(function (e) {
if (index == max - 1) {
index = 0;
} else {
index = index + 1;
}
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
});
//隐藏和显示播放按钮
$(".tp").hover(
function () {
$(".ss").fadeIn(500);
$(this).animate({
"opacity": "0.7"
}, 700);
},
function () {
$(".ss").fadeOut(500);
$(this).animate({
"opacity": "1"
}, 700);
}
);
//点击开始播放 再次点击结束播放
let flag = true;
$(".start").click(function () {
if (flag == true) {
time = setInterval(function () {
if (index == max - 1) {
index = 0;
} else {
index = index + 1;
}
$(".tp>img").attr("src", "images/" + (index + 1) + ".jpg");
}, 2000);
flag = false;
$(".start").attr("src", "images/stop.png");
} else {
clearInterval(time);
flag = true;
$(".start").attr("src", "images/start.png");
}
});
let h = $(".tp>img").height();
$(".ss").css({
"top": -h / 2 - 25
});
//隐藏关灯效果
$(".gd").click(function () {
$(".gd").hide(800);
$(".yt").fadeOut(500);
});
});
});
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45738756/article/details/110351843