网页浏览器

效果

制作网页图片浏览器，实现向前向后翻页、图片缩略图总览、图片缩略图选择、图片翻页过渡效果等功能。

点击后有图片淡入淡出效果。可以点击缩略图来切换展示图片，也可以点击左右按钮切换。

image-20210929204108381

代码

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
<!DOCTYPE html>
<html>
	<head>
	<title>图片浏览器</title>

	<style type="text/css">
	body { text-align:center; }

	.thumbnail
	{
		display:block;
		border-bottom:1px solid black;
	}
	.thumbnail img
	{
		width:100px;
		height:100px;
		margin:10px;
		border:1px solid black;
	}
	.click { cursor:pointer; }

	input[type="button"]
	{
		cursor:pointer;
		background-color:white;

		font-size:70px;
		height:100px;
		width:100px;
	}

	#leftButton { float:left; }
	
	#img
	{
		width:300px;
		height:300px;
		margin:10px;
		border:1px solid black; border:10px solid black;}

	#rightButton { float:right; }

	</style>

		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">
			var maxCount = 5;
			var delay = 500;
			
			$(document).ready(
				function ()
				{
					for (var i = 0; i < maxCount; i++) {
					var src = "https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/" + "0" + (i + 1).toString() + ".jpg";
					var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src);
					$("#thumbnail").append(img);
				}

				$("#thumbnail img").click(
					function ()
					{
						$("#img").css("display", "none");
						var src = $(this).attr("src");
						var alt = $(this).attr("alt");
						var nAlt = parseInt(alt);
						$("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
					}
				)
				.mouseover(function () { $(this).addClass("click"); })
				.mouseleave(function () { $(this).removeClass("click"); });

				$("#leftButton").click(
					function ()
					{
						$("#img").css("display", "none");
						var alt = $("#img").attr("alt");
						if (alt == "1") alt = maxCount + 1;
							
						var nAlt = parseInt(alt) - 1;
						var src = "img/" + "0" + nAlt.toString() + ".jpg";
						$("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
				});
				
				$("#rightButton").click(
					function ()
					{
						$("#img").css("display", "none");
						var alt = $("#img").attr("alt");
						if (alt == maxCount.toString()) alt = 0;
				
						var nAlt = parseInt(alt) + 1;
						var src = "img/" + "0" + nAlt.toString() + ".jpg";
						$("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay);
					}
				);
				}
			);
		</script>
	</head>

	<body>
		<div class="thumbnail" id="thumbnail"></div>
		<input type="button" id="leftButton" value="<=" />
		<img id="img" alt="1" src="https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/01.jpg">
		<input type="button" id="rightButton" value="=>" />
	</body>
</html>