1

次のような画像の配列を返すリンクがあります。

{ "imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png",               
"expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg" }

私の目標は、最初の画像を に表示する<div>ことです。クリックすると、2 番目の画像に変わります。

HTML と JavaScript のみを使用してこれを実現するにはどうすればよいですか?

4

1 に答える 1

4

プレーンなJavaScriptでは、すでにdivが次のように宣言されていると仮定します<div id=divId></div>。

var images = {
    "imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png",               
    "expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg"
};
var div = document.getElementById('divId');
var img = document.createElement('img');
img.setAttribute('src', images.imageUrl);
div.appendChild(img);
img.onclick=function(){
   this.src=images.expandedImageUrl;
};

デモンストレーション

オブジェクトに類似したimagesオブジェクトの配列がある場合は、ループしてそれらを作成できます。「クロージャー効果」のために見た目ほど簡単ではないので、コードを含めます。

var images = [
    { "imageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",               
    "expandedImageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"},
    { "imageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",               
    "expandedImageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"},
    { "imageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",               
    "expandedImageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"}
];
var div = document.getElementById('divId');
for (var i=0; i<images.length; i++) {
    var image =images[i];
    var img = document.createElement('img');
    img.setAttribute('src', image.imageUrl);
    div.appendChild(img);
    (function(expandedImageUrl){ // we embed the expanded URL in a closure to avoid having the value at end of loop used 
        img.onclick=function(){
           this.src=expandedImageUrl;
        };
    })(image.expandedImageUrl);
}

</ p>

デモンストレーション

コメントで次の質問を編集します：

そして、これが2つの画像をクリックして切り替えることができるバージョンです。

var images = [
    { "imageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",               
    "expandedImageUrl":"http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"},
    { "imageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",               
    "expandedImageUrl":"http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"},
    { "imageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",               
    "expandedImageUrl":"http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"}
];
var div = document.getElementById('divId');
for (var i=0; i<images.length; i++) {
    var image =images[i];
    var img = document.createElement('img');
    img.setAttribute('src', image.imageUrl);
    img.setAttribute('othersrc', image.expandedImageUrl);
    img.setAttribute('width', '600px');
    div.appendChild(img);
    img.onclick=function(){
       var src = this.getAttribute('src');
       this.src = this.getAttribute('othersrc');
       this.setAttribute('othersrc', src);
    };
}

デモンストレーション

于 2012-10-21T12:04:01.947 に答える