整体思路图：
一、首先写个div用于包含图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片预览</title>
<style>
*{margin: 0;padding: 0;}
.block{
width: 800px;
height:auto;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>二、使用dom操作动态创建图片，添加到界面中
知识点：1.document.createElement(“元素名称”) 创建一个元素
2.appendChild(添加的元素名) 此方法是向某个节点添加最后一个子节点
代码：<script>
window.οnlοad=function(){
var block=document.getElementsByClassName("block")[0];
/*图片存储*/
var arrimg=["c-2_0ogx.jpg","1_a7or.jpg","c-3_vg6b.jpg","c-4_h340.jpg"];
/*创建图片*/
for(var i=0;i<12;i++){ //循环创建12个img，所以对img的操作不需要加索引;
var img=document.createElement("img");
img.className="image";
block.appendChild(img);
img.src="./image/"+arrimg[i%4];
}
}
</script>并设置一下简单的样式：
最低0.47元/天 解锁文章
2154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
