将图片存进一个数组,然后用js渲染图片到网页上
当然可以,不过存到数组里不太好,因为那样就写死了,建议你将一些图片设置好有规律的名字,然后使用for循环进行变量轮播图片或者循环修改图片的src比较好点
轮播图片代码如下
<body>
<img src="cankao/0.jpg" width="600"/>
</body>
<script>
var i=0;
setInterval(function() {
i++;
if(i==6){
i=0;
}
var a=document.querySelector("img");
a.src="cankao/"+i+".jpg"
},2000)
</script>
当然你非要存到数组里的话也可以,代码如下
<body>
<img id="img01" src="cankao/0.jpg" width="600"/>
........
</body>
<script>
var i=['img01.jpg','img02.jpg','img03.jpg','img04.jpg'];
var a=document.getElementById("img01");
a.src=i[0]
.........
</script>
img标签也要用js生成吗?
完整解答在这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
display: block;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
</body>
<script>
function imags(imagName, imagSrc, imagId, imagJianJie) {
this.imagName = imagName;
this.imagSrc = imagSrc;
this.imagId = imagId;
this.imagJianJie = imagJianJie;
}
var imags1 = new imags("图片1", "image/1.png", 1, "我是第一张图片");
var imags2 = new imags("图片2", "image/2.png", 2, "我是第二张图片");
var imags3 = new imags("图片3", "image/3.png", 3, "我是第三张图片");
var imags4 = new imags("图片4", "image/4.png", 4, "我是第四张图片");
var arr = [imags1, imags2, imags3, imags4];
console.log(arr);
var ul = document.createElement("ul");
for (var i = 0; i < arr.length; i++) {
var li = document.createElement("li");
var h2 = document.createElement("h2");
var img = document.createElement("img");
var p = document.createElement("p");
h2.innerText = arr[i].imagName;
img.src = arr[i].imagSrc;
img.id = arr[i].imagId;
p.innerText = arr[i].imagJianJie;
li.appendChild(h2);
li.appendChild(img);
li.appendChild(p);
ul.appendChild(li);
}
document.body.appendChild(ul);
</script>
</html>
————————————————
版权声明:本文为CSDN博主「大三初学者」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_52996259/article/details/120859716
循环生成img 然后 setAttribute("src",[i])