我怎么能使图像对象在数组是href

how can i make Image object in array to be href

本文关键字：数组 href 对象 怎么能 图像      更新时间：2023-09-26

这是我用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";
 
}

有两种可能的解决方案:在图片周围添加锚点或设置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>

您可以将图像包装在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);
}
相关文章：