我可以让数组中的每个图像都是唯一的链接吗?

JavaScript - Can I make each image in an array a unique link

本文关键字：唯一 链接 数组 我可以 图像      更新时间：2023-09-26

我对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/

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

编辑:

我花了一周的时间寻找一个滑块，没有成功地完成这项工作。我试过使用bootstrap carousel，我试过CarouFredSel, OwlCarousel, TimothySlider, world - slider, CarouselEngine, CircularContentCarousel。这些都不符合我想要的风格，当我试图运行脚本的多个实例时，我遇到了导致代码中断的冲突。我真的不太擅长识别代码中的冲突，所以我试着自己写一个。我把我的问题贴在这里作为最后的手段。

如果我理解正确的话，您需要将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); 
}
相关文章：