Javascript 将带有json的img数组获取到div中

我有一个函数，它返回一个类似于下面一个的图像数组

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

我的目标是在

中显示第一个图像，当单击它时，它将更改为第二个图像

---

仅使用HTML和JavaScript如何实现这一点？

在普通JavaScript中，假设您已经有一个声明为

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

---

如果有一个类似于

图像

对象的对象数组，可以循环创建它们。由于“闭包效应”，它不像看上去那么琐碎，这就是我包含代码的原因：

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

var图像=[
{“imageUrl”：http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",               
“ExpandeImage URL”：http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"},
{“imageUrl”：http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",               
“ExpandeImage URL”：http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"},
{“imageUrl”：http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",               
“ExpandeImage URL”：http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"}
];
var div=document.getElementById（'divId'）；
对于普通javascript中的（var i=0；i，假设您已经有一个声明为
的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;
};



如果您有一个类似于
图像
对象的对象数组，您可以循环创建它们。由于“闭包效应”，这比看起来要简单得多，这就是我包含代码的原因：

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

var图像=[
{“imageUrl”：http://dystroy.org/re7210/img/crevettes-ail-courgettes-2-750.jpg",               
“ExpandeImage URL”：http://dystroy.org/re7210/img/crevettes-ail-courgettes-750.jpg"},
{“imageUrl”：http://dystroy.org/re7210/img/cote-beuf-champis-02-850.jpg",               
“ExpandeImage URL”：http://dystroy.org/re7210/img/cote-beuf-champis-05-850.jpg"},
{“imageUrl”：http://dystroy.org/re7210/img/onglet-truffes-850-02.jpg",               
“ExpandeImage URL”：http://dystroy.org/re7210/img/onglet-truffes-850-05.jpg"}
];
var div=document.getElementById（'divId'）；
对于（var i=0；我非常感谢您，但是如何将其更改回预览图像？我可以使用淡出和淡入进行操作吗？是的，但是1）对于此类操作，我建议使用类似的库。2）使用淡入和淡出交换图像通常很难看。非常感谢，但是如何将其更改回预览图像？我可以使用淡出和淡入进行吗？是的，但是1）对于这种操作，我建议使用类似的库。2） 用淡入模式交换图像通常很难看。