JS图片渲染-渲染图片到网页上

将图片存进一个数组,然后用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])