我怎样才能使数组中的图像对象成为 href

Question

这是我使用 Javascript 用图像声明的数组。我需要将这些图片 href 到多个站点（每张图片的不同站点）。有什么简单的解决办法吗？我是 javascript 的新手...

imgSlide = document.getElementById('img');
 

images = new Array();
images[0] = new Image();
images[0].src = "img1.jpg";
images[1] = new Image();
images[1].src = "img2.jpg";
images[2] = new Image();
images[2].src = "img3.jpg";
images[3] = new Image();
images[3].src = "img4.jpg";
images[4] = new Image();
images[4].src = "img4.jpg";
images[5] = new Image();
images[5].src = "img5.jpg";
images[6] = new Image();
images[6].src = "img6.jpg";
images[7] = new Image();
images[7].src = "img7.jpg";
 
}

Answer 1

您可以将图像包装在 a 元素中，而其 href 指向图像的 src :

var dv = document.getElementById('YOUR_CONTAINER');
for(var i = 0; i < images.length; i++) {
    var a = document.createElement('a');
    a.href = images[i].src;
    a.appendChild(images[i]);
    dv.appendChild(a);
}

Answer 2

有两种可能的解决方案：在 Imgae 周围添加锚点或设置 onclick 事件。

我决定使用 onclick 事件，因为它可以在没有任何进一步逻辑的情况下实现（不选择 a 和设置 href）。

另一种解决方案也在此处的答案中。

如果添加 onclick 处理程序，请不要忘记在功能块中设置代码。

var imgSlide = document.getElementById('img');
 

var images = new Array();
images[0] = new Image();
images[0].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_ccw/sample_images/DSCF3300.JPG";
images[0].onclick = function(){window.location ="http://www.w3schools.com";}
images[1] = new Image();
images[1].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF3165_2.jpg";
images[1].onclick = function(){window.location ="http://forum.xda-developers.com";}
images[2] = new Image();
images[2].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF3352_2.jpg";
images[2].onclick = function(){window.location ="http://yelp.com";}
images[3] = new Image();
images[3].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_ccw/sample_images/DSCF1668.JPG";
images[3].onclick = function(){window.location ="http://www.finepix-x100.com";}
images[4] = new Image();
images[4].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF1773.JPG";
images[4].onclick = function(){window.location ="";}
images[5] = new Image();
images[5].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF3983_2.jpg";
images[5].onclick = function(){window.location ="";}
images[6] = new Image();
images[6].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_ccw/sample_images/DSCF2904_2.jpg";
images[6].onclick = function(){window.location ="";}
images[7] = new Image();
images[7].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_cw/sample_images/DSCF2564.JPG";
images[7].onclick = function(){window.location ="";}

//length in ms
var duration = 2000;

var i = 0;
    appendImage(i);
for (i; i<images.length; i++){    
    appendImage(i);
}
setInterval(function(){
    imgSlide.removeChild(images[images.length-1]);
    var i = 0;
    appendImage(i);
    for (i; i<images.length; i++){    
        appendImage(i);
    }
},(images.length) * duration);



function appendImage(number){
    setTimeout(function(){
    if (number == 0){
    imgSlide.appendChild(images[number]);
    }else if(number < images.length){
        imgSlide.removeChild(images[number-1]);
        imgSlide.appendChild(images[number]);
    }
    },number * duration);
}

<div id = "img"></div>

我怎样才能使数组中的图像对象成为 href

how can i make Image object in array to be href

javascript

arrays

href