Javascript幻灯片添加链接

时间:2014-06-20 00:52:15

标签: javascript function

此脚本将循环显示图像,但我无法弄清楚如何识别与每个图像关联的链接。我以为我可以使用相同的计数器“i”来移动链接数组,但它不起作用。

var images = [
"Image1.jpg",
"Image2.jpg",
"Image3.jpg"
];

var weblinks = [
"http://google.com",
"http://yahoo.com",
"http://dell.com"
];
var num = images.length;
var i = 0;
var t;

function play() {
if(typeof t === 'undefined') {
    t = setInterval(next, 2000);
}
}

function Stop() {
if(t) clearInterval(t);
}

function next() {
if(++i >= num) i = 0;
document.getElementById('img').src = images[i];
document.getElementById('link').src = webLinks[i];

}

function previous() {
if(--i < 0) i = num-1;
document.getElementById('img').src = images[i];
document.getElementById('link').src = webLinks[i];

}

window.onload = function() {
document.getElementById('img').src = images[0];
document.getElementById('link').src = webLinks[0];
a.href=link[i];

}

HTML

<table width="50%" border="0" cellspacing="10" cellpadding top="0" align="center">
<tr>
<td><input type="button" value="Back" onclick="previous()"/></td>
<td align="center"><a id="link" href="#" target="_self"><img src="Image1.jpg" alt=""  id="img"/></a></td>
<td><input type="button" value="Next" onclick="next()"/></td>
</tr>
<tr>
<td colspan="3" align="center" height="50"><input type="button" value="Play" onclick="play()" />
  <input type="button" value="Stop" onclick="Stop()" /></td>
</tr>
</table>

1 个答案:

答案 0 :(得分:1)

document.getElementById('link').src替换为document.getElementById('link').href - 您正在更改链接的错误属性。

编辑:也将var weblinks更改为var webLinks - JavaScript区分大小写。 并删除a.href=link[i];,它不执行任何操作(因为a未定义,也不是链接)。