JavaScript 增量图像

JavaScript increment images

本文关键字：图像 JavaScript      更新时间：2023-09-26

我正在尝试使用 JavaScript 自动按顺序列出图像 01-40。

喜欢这个：

<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
...

我不想手动编写每个img src，因为我想在多个页面上使用它

我希望图像的开头和结尾数字是我可以轻松编辑的变量。

你需要 imgs 的父元素：

for ( var i = FIRST_NUMBER ; i < LAST_NUMBER ; i++ ) {
    var elem = document.createElement("img");
    if ( i < 10 ) {
        elem.setAttribute("src", "0"+i+".jpg");
    } else {    
        elem.setAttribute("src", i+".jpg");
    }
    document.getElementById(PARENT_ID).appendChild(elem);
}

    function img_create(startIndex, endIndex) {
    for (i = startIndex; i <= endIndex; i++) {
        var oImg=document.createElement("img");
            oImg.setAttribute('src', i+".jpg");
            //other attributes you need
            document.body.appendChild(oImg);
    }
}

工作示例：http://jsfiddle.net/Lw3bjcx4/1/

function createImages(count, elementId) {
    // Get the container element where you want to create the images
    var element = document.getElementById(elementId)
    // Loop count times over to create count image elements
    for (var i = 0 ; i < count ; i++) {
        // Create a new image element
        var imageElement = document.createElement('img')
        // Set the source to index.jpg where index is 0,1,2,3.... count
        imageElement.setAttribute('src', i + ".jpg")
        // Append the new image element to the choosen container.
        element.appendChild(imageElement)
    }
}
// Test to create 10 images.
createImages(10,"imgs")

你可以这样使用：

var imgdiv = document.getElementById('imgdiv');
var img = imgdiv.getElementsByTagName('img');
for(var i=0;i<40;i++){
  img[i].src=i+'.jpg';
}

这是所有其他答案的替代方法，您无需使用 id 即可放入图像。只需将脚本标记粘贴到需要图像的位置即可。例如，如果将其放在div 中，脚本将自动将图像插入到位。

<script type="text/javascript">
    var thisScriptNode = document.currentScript;
    for(var i = 1 ; i <= 40 ; i++) {
        var img = document.createElement("img");
        img.src = ("00" + i).substr(-2) + ".jpg";
        thisScriptNode.parentNode.insertBefore(img, thisScriptNode);
    }
</script>

您可以轻松更改前导零的数量。例如，要获取包含三个字符的数字，请将"00"替换为 "000"，将-2替换为 -3 。

var to = 10;
var from = 0;
for (i = from; i < to; i++){
    var elem = new Element('img', { src: i + '.jpg' });
    document.body.appendChild(elem);
}

它将附加到名称从 0.jpg 到 9 的 <body> 个图像.jpg

相关文章：