Question

这是一个使用Javascript声明图像的数组。我需要将这些图片映射到几个站点（每个图片的不同站点）。有没有简单的解决方案？我是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处理程序，请不要忘记在功能块中设置代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: