时间戳

首页 > 解决方案 > 如何允许数组中的不同图像链接到不同的 url 网页

javascript - 如何允许数组中的不同图像链接到不同的 url 网页

问题描述

我想将数组中的不同图像链接到不同的 url。图像将每 2 秒随机一次。但是，我想确保每张图片都有其唯一的网址。到目前为止，我只能链接到一个网址。

在这方面需要帮助，谢谢。

//start with id=0 after 2 seconds
var thisId = 0;

$(function(){
	//prepare Your data array with img urls
	var dataArray=new Array();
	dataArray[0]="cat1.jpg";
	dataArray[1]="cat2.jpg";
	dataArray[2]="cat3.jpg";

	window.setInterval(function(){
	var randomNum = Math.floor(Math.random() * dataArray.length);
	
	if (thisId==randomNum){randomNum++;};
	if (randomNum==3){randomNum=0};
	thisId=randomNum;
	
	document.getElementById("thisImg").src = dataArray[randomNum]
	},2000); 
});
<!DOCTYPE html>
<html>
<head>
	<title>Task 2</title>
	
	<!-- calling external js file -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<a href="https://www.petco.com/shop/en/petcostore/category/cat" target="_blank"><img id="thisImg" alt="img" src="cat1.jpg" /></a>
	<script src ="Task2.js"></script>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

您可以将数据设为对象数组，如下所示：

dataArray = [
    {
        image: "cat1.jpg"
        url: "link_for_cat_1.html"
    }
    ...
]

然后，在随机化和选择给定元素之后：

document.getElementById("thisImg").src = dataArray[randomNum].image

并类比链接

document.getElementById("thisLink").href = dataArray[randomNum].url

推荐阅读