在HTML中批量在一个div中添加图片。
参考代码如下
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
</head>
<body>
<div id="divi" hh()>
</div>
<script>
var width=window.innerWidth;
var height=window.innerHeight;
var div=document.getElementById("divi");
if(width <2*116)
width=2*116;
div.style.width=1/2*width+"px";
var div=document.getElementById("divi")
for(var i=1;i<=9;i++){
var img=document.createElement("img");
img.setAttribute("style","width: 100px; height: 80px;margin: 8px;");
//添加图片
img.setAttribute("src",i+".jpg");
div.append(img);
}
</script>
</body>
</html>
效果图片：
竖列排布
代码块分析
- 前部分代码块获取浏览器当前窗口的大小，方便后面图片的排布。
- 代码块for循环中通过setAttribute函数添加img标签和设置img的属性，至于函数的参数，不懂得小朋友可以去网上查看一下。
- 可以把图片轮播效果添加到网页上面去，而且如果遇到想要大量添加图片的时候，这个办法可以简化很多的代码。
至于图片轮播效果,我就留在下期给大家分享吧，比较事件有限，最近学业也比较繁忙！！那我们就下期再见吧！！！
网友评论