JavaScript 增量图像答案

【问题标题】：JavaScript increment imagesJavaScript 增量图像
【发布时间】：2014-10-13 16:34:21
【问题描述】：

我正在尝试使用 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，因为我想在多个页面上使用它

我希望图像的开始和结束编号是我可以轻松编辑的变量。

【问题讨论】：

你尝试了吗？你知道如何创建循环吗？
图片是否通过 ajax 提供？为什么不通过服务器（php 或其他）来执行此操作？
我已经尝试了一些我在这里看到的东西。不，我对 Javascript 知之甚少。我必须做这个客户端，我使用 Dropbox 来托管图像和 HTML 页面。
它们应该按照创建的顺序出现还是应该在最后以正确的顺序出现？
我希望它们按名称升序排列。

标签： javascript html image increment

【解决方案1】：

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.jpg 的 <body> 图像

【讨论】：

【解决方案2】：

你需要 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);
}

【讨论】：

这适用于我想要的，还有一件事，
在 var elem = document.createElement("img");添加： if (i
完美运行。谢谢你们。
我更新了代码以使用您的约定“0”+ i。 @Coder：很好的观察。

【解决方案3】：

这是所有其他答案的替代方法，您不需要使用 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。

【讨论】：

【解决方案4】：

你可以这样使用：

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

【讨论】：

【解决方案5】：

工作示例：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")

【讨论】：

【解决方案6】：

    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);
    }
}

【讨论】：