javascript - 添加更改图像的链接

标签 javascript html ajax

因此,我正在制作一个显示图像的页面,并且每 2 秒,图像会使用数组中的四个图像进行更改。我还需要能够将每个图像链接到不同的网址,但是我不确定如何执行此操作,因为我尝试过的所有方法都不起作用,非常感谢任何帮助。

HTML

<!DOCTYPE html>
<html>
<head> 
    <script src = "task6.js"></script>
</head>
<body onload="ImageChange()">
<div align="center">
<img src="images/image2.png" id="image" height="200" width="200">
</div>
</body>
</html>

Javascript

var Cntr = 2;

var images = new Array();
images[0] = "images/image1.png";
images[1] = "images/image2.png";
images[2] = "images/image3.png";
images[3] = "images/image4.png";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("image").src=images[Cntr];
setTimeout("ImageChange()", 2000);
}

最佳答案

将链接包含在 A 标记中

像这样

<a href="" id="mylink"><img src="images/image2.png" id="image" height="200" width="200"></a>

并更改您的 JavaScript,如下所示。

var Cntr = 2;

var images = new Array();
images[0] = "images/image1.png";
images[1] = "images/image2.png";
images[2] = "images/image3.png";
images[3] = "images/image4.png";

var links = new Array();
links[0] = "link1";
links[1] = "link2";
links[2] = "link3";
links[3] = "link4";

function ImageChange()
{
Cntr= Cntr+1;
if (Cntr==4)
{
    Cntr=0;
}
document.getElementById("image").src=images[Cntr];
document.getElementById("mylink").href=links[Cntr];
setTimeout("ImageChange()", 2000);
}

关于javascript - 添加更改图像的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23708730/

相关文章:

php - 如何在 php 中刷新数据并断开用户连接但保持脚本事件

javascript - 如何通过javascript禁用ajax缓存而不使用jquery?

javascript - 使用 for 循环从 Javascript 函数返回多个值

c# - 如何使用 GeckoFX 作为 XULRunner 的包装器在 javascript 中调用 C# 方法

javascript - 如何使用 jQuery :contains(some text) selector but only select "some text" from "this is some text"?

html - 通过 css 选择链接

php - 从属性中删除呈现的 HTML 中的引号

javascript - Ajax RSS 阅读器

javascript - react 改变组件的 Prop 而不是每次渲染

html - 为 h3 元素的特定部分设置样式