方法一:str拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 300px;
height: 300px;
}
.item img{
width: 100%;
}
#allPic .item {
float: left;
}
</style>
<script>
function init() {
var arr1 = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"]
var arr2 = ["联想(Lenovo)", "华硕(ASUS)", "Dell", "Hp", "Mac", "XiaoMi"]
var str = "";
for (var i = 0; i < arr1.length; i++) {
str += "<div class='item'>";
str += "<div><img src='image2/" + arr1[i] + "'></div>";
str += "<p>" + arr2[i] + "</p>";
str += "</div>"
}
document.getElementById("allPic").innerHTML = str;
}
</script>
</head>
<body onload="init()">
<section id="allPic">
</section>
</body>
</html>
详情展示:
方法二:
结构:
<section id="allPic">
<!-- <div>
<img src="images/1.jpg" alt="">
<p>联想(Lenovo)</p>
</div> -->
</section>
代码如下:
<style>
div{
width: 300px;
height: 300px;
}
div img{
width: 100%;
}
#allPic div{
float: left;
}
</style>
<script>
function init() {
var arr1 = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"]
var arr2 = ["联想(Lenovo)", "华硕(ASUS)", "Dell", "Hp", "Mac", "XiaoMi"]
var section = document.getElementById("allPic")
for (var i = 0; i < arr1.length; i++) {
var node = document.createElement("div")
node.innerHTML = "<img src='image2/" + arr1[i] + "'> <p>" + arr2[i] + "</p>"
section.appendChild(node);
}
}
</script>
方法三:
<script>
function init() {
var arr1 = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"]
var arr2 = ["联想(Lenovo)", "华硕(ASUS)", "Dell", "Hp", "Mac", "XiaoMi"]
var section = document.getElementById("allPic")
for (var i = 0; i < arr1.length; i++) {
var div = document.createElement("div")
var img = document.createElement("img")
//img.src="images/"+arr1[i]
img.setAttribute("src","image2/"+arr1[i]);
div.appendChild(img);
var p = document.createElement("p")
var text=document.createTextNode(arr2[i])
p.appendChild(text);
div.appendChild(p);
section.appendChild(div);
}
}
</script>