0

簡単なギャラリー写真を作成できません。小さな画像をクリックした後、メイン画像の代わりに画像をリロードする必要があります。

gallery.js

imgArray = [  
  '../images/1.jpg',
  '../images/2.jpg',
  '../images/3.jpg',
  '../images/4.jpg',
  '../images/5.jpg',
  '../images/5.jpg'
];

function changeImage(nameOfImage){        
  document.getElementById('mainImage').src = imgArray[nameOfImage.id];
}

html

<div align="center" class="mainImageDiv">
  <img id="mainImage" src="images/action/1.jpg" alt="1.jpg, 206kB" title="1" height="600" width="500">
</div>

<a href="#" id="1" onClick="changeImage(this)"><img src="images/action/min1.jpg" alt="min1.jpg, 18kB" title="min1" height="120" width="100" /></a>
<a href="#" id="2" onClick="changeImage(this)"><img src="images/action/min2.jpg" alt="min2.jpg, 18kB" title="min2" height="120" width="100" /></a>
4

1 に答える 1

0

必要なコードは次のようなものです。

http://jsfiddle.net/M2BSu/

var imgArray = [  
 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Brain_human_sagittal_section.svg/295px-Brain_human_sagittal_section.svg.png',
 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Solanum_muricatum_Flower_and_Fruit.jpg/220px-Solanum_muricatum_Flower_and_Fruit.jpg'
];

var counter = 0;
document.getElementById('my_button').onclick = function () {  
    document.getElementById('mainImage').src = imgArray[counter % imgArray.length]; 
    counter += 1;
}

編集問題を誤解しているようです。人々がコメントしたように、エラーはあなたのIDが有効な配列インデックスではないということだと思います。次のように、代わりに実際のオブジェクトを使用できます。

<a href="#" id="a_full_name" onClick="changeImage(this)">

var images = {
    'a_full_name': 'path to image',
    'another_img_id': 'path to this image'
};

function changeImage(anchor_object){   ... } // what you are passing is not the name of the image

これで、コードが機能するはずです。配列は JavaScript ではあまり信頼できません (実際の配列ではないため)

編集：問題が見つかったら、この簡単な解決策を提供します。いつものように、シンプルであるほど良いです。配列などを読み取らないでください。小さな画像のパスから大きな画像のパスを取得するだけです。html と配列を並行して面倒なメンテナンスを行う必要はありません。サムネイルと全体像の間で一貫した命名を維持する必要があります。

html 本当にアンカー要素は必要ありません。ポインターマウスが必要な場合は、CSSを変更してください

<img onClick="changeImage(this)" src="images/action/min1.jpg" title="min1" />

JavaScript

function changeImage(image_clicked){   // you pass the image object     
    var min_path = image_clicked.src;

    // adapt the path to point to the big image, in this case get rid of the "min"
    var big_path = min_path.replace("min", "");

    document.getElementById('mainImage').src = big_path;
}

複雑にしないでおく。

于 2013-03-06T14:07:31.500 に答える