Javascript：Loopを使用して画像にURLを含む配列を入力する

ローカルフォルダから画像のリストを表示したかったのですが、私は理解が錆びているので、ライブラリからjavascriptの本をチェックアウトする必要があります。各画像ファイルのための
1. URLのすべてを持つ配列を埋める
2.代わりの配列をそれらのimgタグ、ループの全てを書き込み、親要素にIMGタグを追加：私が達成したい何Javascript：Loopを使用して画像にURLを含む配列を入力する

。

私はこれに慎重に近づいています。誰も助けることができますか？（ところで、scriptタグには、それまでと同じように何もしないコードが含まれています）。

<!DOCTYPE html> 
<html> 
<head> 
<title> Quick View Gallery </title> 

<script> 
var maxPages = 23; 
var arr = []; 
for (var i = 1; i <= maxPages; i++) { 
arr.push(i); 
} 
</script> 

<style> 
    img { 
     height: 100%; 
     width: 100%; 
     border: 1px solid #66ccff; 
    } 
</style> 
</head> 
<body bgcolor="#333333"> 

<div id="comicPages"> 
    <img src="1.jpg"></img> <p> 
    <img src="2.jpg"></img> <br> 
    <img src="3.jpg"></img> <br> 
    <img src="4.jpg"></img> <br> 
    <img src="5.jpg"></img> <br> 
    <img src="6.jpg"></img> <br> 
    <img src="7.jpg"></img> <br> 
    <img src="8.jpg"></img> <br> 
    <img src="9.jpg"></img> <br> 
    <img src="10.jpg"></img> <br> 
    <img src="11.jpg"></img> <br> 
    <img src="12.jpg"></img> <br> 
    <img src="13.jpg"></img> <br> 
    <img src="14.jpg"></img> <br> 
<img src="15.jpg"></img> <br> 
<img src="16.jpg"></img> <br> 
<img src="17.jpg"></img> <br> 
<img src="18.jpg"></img> <br> 
<img src="19.jpg"></img> <br> 
<img src="20.jpg"></img> <br> 
<img src="21.jpg"></img> <br> 
<img src="22.jpg"></img> <br> 
<img src="23.jpg"></img> <br> 
</div> 
</body> 
</html>

出典

2017-03-15 RodNICE

あなたのファイル名を使用すると、次のことを行うことができますの.jpgのn +のように常にしている場合：あなたがあなたの体に<div id="comicPages"></div>を挿入した後

var container = document.getElementById('comicPages'); 

var images = 23; 

for (var i = 0; i < images; i++) { 
    // this will create and insert the corresponding image 
    // new Image() creates a new <img> element. there is not much of a difference 
    // to document.createElement('img'). additional you can call it as: 
    // new Image(width, height) in case you already know its dimensions. 
    var node = new Image(); 
    // additional you can also do the following as: node.src = i + '.jpg'; 
    node.setAttribute('src', i + '.jpg'); // but i like conventions 
    container.appendChild(node); 

    // this will ensure to insert a line break between each image 
    if (i < images - 1) { 
     container.appendChild(document.createElement('br')); 
    } 
}

は、あなたがこれを実行する必要が念頭に置いておきます。ここで

出典

2017-03-15 17:43:19 GottZ

これは主に、html要素の配置がこの作業を行うために必要な場所を正確に教えてくれたからです。私は他の答えも同様のものが必要だと確信していますが、私は理解のためにいくつかの穴を修正するためにもっと勉強する必要があります。 – RodNICE

イメージ名のリストが配列にある場合は、このようにすることができます。

jQueryの

var imageUrlCollection = new Array(); //image URL collection 
var parentElement = $('#comicPages'); 
for (var item = 0; item < imageUrlCollection.length; item++) { 
     parentElement.append($('<img>',{id:item,src:imageUrlCollection[item]})); 
}

バニラJS

var imageUrlCollection = new Array(); //image URL collection 
var parentElement = document.getElementById('comicPages'); 
for (var item = 0; item < imageUrlCollection.length; item++) { 
    var image = document.createElement("img"); 
    image.id = item; 
    image.className = "img"; 
    image.src = imageUrlCollection[item]; 
    parentElement.appendChild(image); 
}

出典

2017-03-15 17:35:45 forethought

。 –

jQueryとvanilla JSコードの両方を追加しました – forethought

ここで質問などの非はJQueryの答えはそれを呼び出すことはありませんでしたです。

すべてのページの画像要素を作成し、それを漫画本のページに追加することができます。たとえば： https://jsfiddle.net/zwg5gLfu/1/

出典

2017-03-15 17:39:56

あなたは漫画本のページであなたのイメージギャラリーを移入するdocument.createElement、Node#cloneNode、およびNode#appendChildを使用することができます。ここでは

var arr = []; 
for (int i = 1; i <= 23; i++) { 
    var ele = document.createElement("img"); 
    ele.src = i+".jpg"; 
    arr[i] = ele.src; 
    document.getElementById("comicPages").appendChild(ele); 
}

はフィドルです。また、改行要素（<br>）を使用してイメージを区切る代わりに、イメージをdisplay: blockのようにスタイルすることもできます。

var maxPages = 23 
 
var comicPages = document.getElementById('comicPages') 
 
var img = document.createElement('img') 
 

 
for (var i = 1; i <= maxPages; i++) { 
 
    img.src = i + '.jpg' 
 
    img.alt = 'Comic Page (' + i + '/' + maxPages + ')' 
 
    comicPages.appendChild(img.cloneNode()) 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title> Quick View Gallery </title> 
 
    <style> 
 
    #comicPages img { 
 
     height: 100%; 
 
     width: 100%; 
 
     display: block; 
 
     color: #fff; 
 
     border: 1px solid #66ccff; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body bgcolor="#333333"> 
 

 
    <div id="comicPages"> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-03-15 17:43:04 gyre

は、最終的なコードは次のようになります。私は質問にjQueryのタグを見ることができない

<!DOCTYPE html> 
<html> 
<head> 
    <title> Quick View Comic Gallery </title> 

<style> 
    #comicPages img { 
     height: 100%; 
     width: 100%; 
     display: block; 
     border: 1px solid #66ccff; 
    } 
</style> 
</head> 
<body bgcolor="#333333"> 

<div id="comicPages"></div> 

<script> 
    var container = document.getElementById('comicPages'); 
    var images = 23; 
    for (var i = 0; i <= images; i++) { 
     var node = new Image(); 
     node.setAttribute('src', i + '.jpg'); 
     container.appendChild(node); 
    } 
</script> 

</body>

出典

2017-03-20 22:39:34 RodNICE

Javascript：Loopを使用して画像にURLを含む配列を入力する

答えて

関連する問題