Question

我是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，WoW-Slider，CarouselEngine，CircularContentCarousel。这些都不符合我的想法，当我尝试运行脚本的多个实例时，我遇到了导致代码中断的冲突。我真的不够好来识别代码中的冲突，所以我试着自己写一个。我在这里发布我的问题作为最后的手段。

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

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

1 个答案: