<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用json在页面展示图片</title>
<style>
table{border-collapse: collapse;}
.over{font:size 12px;}
</style>
</head>
<body>
<table
id="mytable"
width="400"
align="center"
border="2"
>
<!-- 等待json插入图片数据 -->
</table>
<script>
var imgArray = [
{
src:"img/1.jpg"
},
{
src:"img/2.jpg"
},
{
src:"img/3.jpg"
},
{
src:"img/4.jpg"
}
];
var mytable = document.getElementById("mytable");
for (var i = 0; i < imgArray.length; i++) {
var otr = document.createElement("tr");
otr.align = "center";
otr.onmouseover = function () {
this.classList.add("over");
};
otr.onmouseout = function () {
this.classList.remove("over");
};
for (var pro in imgArray[i]) {
var otd = document.createElement("td");
var oimg = document.createElement("img");
oimg.src=imgArray[i][pro];
//img：require('图片路径')
otd.appendChild(oimg);
otr.appendChild(otd);
}
mytable.appendChild(otr);
};
</script>
</body>
</html>
图片路径记得换成自己的欧！
