JavaScript - 我可以使数组中的每个图像成为唯一链接吗答案

【问题标题】：JavaScript - Can I make each image in an array a unique linkJavaScript - 我可以使数组中的每个图像成为唯一链接吗
【发布时间】：2014-05-17 04:39:02
【问题描述】：

我对 JavaScript 非常陌生，希望能得到一些帮助。我正在尝试构建一个滑动横幅，它同时显示和旋转 5 张不同的图片。我已经使用了 5 个版本的代码：

<body onLoad="swapImage2();"/>      <!--Linked with jquery-->

       <script language="JavaScript"> 
var k = 0; var path2 = new Array(); 

// LIST OF IMAGES 
path2[0] = "pics/prime/1r.png"; 
path2[1] = "pics/prime/2r.png"; 
path2[2] = "pics/prime/3r.png"; 
path2[3] = "pics/prime/4r.png";

function swapImage2() 
{ 
document.slider.src = path2[k]; 
if(k < path2.length - 1) k++; 
else k = 0; 
setTimeout("swapImage2()",6000); 
} 
</script> 
<img class="small_banner" name="slider"/> <!-- This is where the image is displayed-->

所以 img 标签是显示数组项的位置。我需要所有 5 个数组中的每个图像都有自己的链接到我网站中的各个页面。澄清一下：

<a href="#"><img class="small_banner" name="slider"/></a>

行不通，因为这会使整个显示区域成为一个链接，我需要 pics/prime/1r.png (2r,3r,4r) 成为各自的链接。

这是我使用的完整代码：http:http://jsfiddle.net/BeaverKing/3wR5f/1/

我知道我很可能遗漏了一些明显的东西，或者我只是使用了错误的脚本来完成这项工作。如果是这样，有人可以建议一个更好的脚本吗？

编辑：

上周我一直在寻找一个没有成功的滑块。我试过使用引导轮播，我试过 CarouFredSel、OwlCarousel、TimothySlider、WoW-Slider、CarouselEngine、CircularContentCarousel。这些都不符合我想要的风格，当我尝试运行脚本的多个实例时，我遇到了导致代码中断的冲突。我真的不太擅长识别代码中的冲突，所以我尝试自己写一个。作为最后的手段，我在这里发布我的问题。

【问题讨论】：

那里有很多滑块脚本，所以请自己去寻找。
我试过了。上周我一直在寻找一个没有成功完成这项工作的人。我试过使用引导轮播，我试过 CarouFredSel、OwlCarousel、TimothySlider、WoW-Slider、CarouselEngine、CircularContentCarousel。这些都不符合我想要的风格，当我尝试运行脚本的多个实例时，我遇到了导致代码中断的冲突。我真的不太擅长识别代码中的冲突，所以我尝试自己写一个。作为最后的手段，我在这里发布我的问题。
例如，当您尝试使用 Bootstrap 轮播时，什么对您不起作用？如果在每个<div class="item"> 中都有一个围绕图像的链接，那不会完成您想要做的事情吗？
我可以让引导滑块中的每个图像成为可点击的链接，这不是问题。问题是两次运行滑块。当我链接两个相同的滑块时，只有第一个有效。我尝试使用一个滑块来完成这项工作，但我无法按照自己的意愿设置样式。我需要一个 750px 宽 x 200px 高的横幅，然后在它旁边我需要 4 250px 宽 x 50px 高的横幅，每个横幅都需要每 6 秒滚动一次。当我尝试 CarouFredSel 时，它与我正在使用的随机滑块发生冲突。

标签： javascript jquery html arrays hyperlink

【解决方案1】：

如果我没看错，您需要将id 属性添加到a 标记并在交换函数中设置href。类似的东西：

<a href="#" id='link_for_img'><img class="small_banner" name="slider"/></a>

和脚本

// LIST OF IMAGES WITH PATHS
path2[0] = { img:"pics/prime/1r.png", link: 'pics/prime/1r.png'};
path2[1] = { img:"pics/prime/2r.png", link: 'pics/prime/2r.png'};
path2[2] = { img:"pics/prime/3r.png", link: 'pics/prime/3r.png'};
path2[3] = { img:"pics/prime/4r.png", link: 'pics/prime/4r.png'};

function swapImage2() 
{ 
    document.slider.src = path2[k].img; 
    document.getElementById('link_for_img').href = path2[k].link;
    if(k < path2.length - 1) k++; 
    else k = 0; 
    setTimeout(swapImage2,6000); 
}

【讨论】：

感谢小伙伴的回复，可惜没用。它现在只显示集合中的第一张图片，并且不会转到链接，而是链接到 #
Uncaught TypeError: undefined is not a function - 如果我没看错，那就是 swapImage2() 没有定义
@BeaverKing 这是getElementById 的错字再试一次:-)
您先生是摇滚明星！它就像一个绝对的魅力。非常感谢您的协助兄弟:-)