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

Question

I'm very new to JavaScript, and was hoping for some help. 我对JavaScript非常陌生，希望获得一些帮助。 I'm trying to build a sliding banner, that has 5 different pictures displayed and rotated simultaneously. 我正在尝试构建一个滑动横幅，该横幅同时显示和旋转5张不同的图片。 I've got that working with 5 versions of this code: 我已经使用了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-->

So the img tags is where the array item is displayed. 因此，img标签是显示数组项的位置。 I need each image in all 5 arrays to have it's own link to various pages in my site. 我需要所有5个阵列中的每个图像都有自己的链接，该链接指向我网站中的各个页面。 To clarify: 澄清：

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

won't work, since that makes the entire display area one link, where I need pics/prime/1r.png (2r,3r,4r) to each be their own link. 将不起作用，因为这会使整个显示区域成为一个链接，在这里我需要pics / prime / 1r.png（2r，3r，4r）成为各自的链接。

Here's the complete code as I'm using it:http: http://jsfiddle.net/BeaverKing/3wR5f/1/ 这是我正在使用的完整代码：http：http: //jsfiddle.net/BeaverKing/3wR5f/1/

I know I'm most likely missing something obvious, or perhaps I'm just using the wrong script for the job. 我知道我很可能会遗漏一些明显的东西，或者也许我只是在使用错误的脚本来完成工作。 If so, could someone suggest a better script? 如果是这样，有人可以建议一个更好的脚本吗？

EDIT: 编辑：

I've spent the last week looking for a slider that does the job without success. 我花了最后一周的时间来寻找能够成功完成工作的滑块。 I've tried using the bootstrap carousel, I've tried CarouFredSel, OwlCarousel, TimothySlider, WoW-Slider, CarouselEngine, CircularContentCarousel. 我尝试使用自举轮播，尝试了CarouFredSel，OwlCarousel，TimothySlider，WoW-Slider，CarouselEngine，CircularContentCarousel。 None of these work stylistically with what I want, and when I tried to run multiple instances of the script, I was getting conflicts causing the code to break. 这些都不符合我的要求，并且当我尝试运行脚本的多个实例时，遇到冲突导致代码中断。 I'm really not good enough to identify the conflicts in code, so I tried to write one myself. 我真的不足以识别代码中的冲突，因此我尝试自己写一个。 I'm posting my question here as a last resort. 作为最后的解决方法，我将在此处发布我的问题。

Answer 1

if i undestand right, you need add id attribute to a tag and in swap function set href for it. 如果我的权利已了解，你需要添加id属性， a标签和交换功能集href它。 something like that: 像这样的东西：

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

and script 和脚本

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-05-16 18:32:18

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-16 18:32:18

解决方案1
0 已采纳 2014-05-16 18:32:18