2

画像の配列を作成しました

function initialize(){
//add our 10 images to our array
imgArray[imageNum++] = new imageItem(imageDir + "img1.jpg");
imgArray[imageNum++] = new imageItem(imageDir + "img2.jpg");
imgArray[imageNum++] = new imageItem(imageDir + "img3.jpg");

}
var totalImgs = imgArray.length;

次に、htmlファイル内のにリンクされている関数を作成します。

<button id="startButton" onclick="startImage()">Start</button>

function startImage(){

    document.getElementById("pic").setAttribute("src", imgArray[0].src);
}

私の画像タグ：<img id="pic" src="" height="300" width="500" border="0" alt="image"> これは私のimgオブジェクトの更新に失敗します、私はDOMを調べるためにfirebugを使用し、私の配列は正しく入力されていますが、img srcが設定されていませんか？

4

3 に答える 3

3

複数の画像を読み込むことは、さまざまなプロジェクトで使用したい機能のように聞こえます。画像配列を処理し、画像オブジェクトをDIVに追加できる関数を作成することをお勧めします。

var images = [
    'path/to/image1.png',
    'path/to/image2.png',
    'path/to/image3.png',
    'path/to/image4.png',
    'path/to/image5.png'
];

function loadImages(imgArr, targetId){
    for(var i=0; i< imgArr.length; i++) {
        console.log(imgArr[i]);
        var img = new Image();
            img.src = imgArr[i];
        document.getElementById('output').appendChild(img);
    }
}

loadImages(images);

youtボタンからloadImage（）関数を呼び出すこともできます。

<button onclick="loadImages(images)">Start</button>
于 2012-02-15T03:35:29.943 に答える
2

あなたの例は不完全です。コンストラクターが何をするかを示す必要がありますimageItem（そして、コンストラクターの最初の文字に大文字を使用するのが慣例です）。

function ImageItem(src) {
  this.image = new Image();
  this.src = src.
}

ここで仕事をする必要があります。また、グローバルとして望んでいるように見えるimgArrayので、1つとして宣言します。

var imgArray;

function initialize(){
    //add our 10 images to our array 
    imgArray[imageNum++] = new imageItem(imageDir + "armory.jpg");

配列リテラルの割り当ては少し簡単です。

    imgArray = [ new ImageItem(imageDir + "armory.jpg"),
                 new ImageItem(imageDir + "eddy.jpg"),
                 ...
                 new ImageItem(imageDir + "...")
    ];
}

var totalImgs = imgArray.length;

配列リテラルを直接割り当てず、ラッパー関数を気にしない理由はわかりませんが。関数はstartImage少し整理することができます：

function startImage(){
    document.getElementById("pic").src = imgArray[0].src;
}

要素のプロパティに直接アクセスすることは、ブラウザー間で信頼性が高く、使用するよりも入力が少なくなりますsetAttribute（一部のブラウザーには癖があります）。

于 2012-02-15T03:20:48.753 に答える
0

このようにJavaScript関数を変更して、を参照してください。

function startImage(){

    document.getElementById("pic").src =  imgArray[0].src;
}
于 2012-02-15T03:20:00.390 に答える