整体思路图:
一、首先写个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>
并设置一下简单的样式: