将计时器和网络链接添加到随机图像系统?
Posted
技术标签:
【中文标题】将计时器和网络链接添加到随机图像系统?【英文标题】:Adding timer and web links to a random image system? 【发布时间】:2020-08-25 11:14:43 【问题描述】:我有一个随机图像系统,每次加载页面时都会不断变化。
我正在尝试做的事情同时得到它:
-
图像每 15 秒随机变化一次
和
-
您可以点击每张随机图片,其中附有网络链接。
--
我需要它在标准的 html 页面中运行,所以需要使用 javascript
var timerid = setInterval(changeImage(), 1000);
不确定如何在代码中设置:
random_img[2] = '';
希望你能帮忙,因为我无法解决:-(
谢谢
提姆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Displaying a Random Image</title>
<style type="text/css">
p
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: xx-large;
background-color: #E5E5E5;
width: 400px;
padding: 10px;
#kirupaLogo
box-shadow: 5px 5px 25px -2px #333;
body
background-color: #F0F0F0;
h4
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: medium;
color: #999999;
font-weight: normal;
</style>
</head>
<body>
<p>Displaying a Random Image</p>
<br />
<img id="randomImage" /> <br />
<br />
<script>
function getRandomImage()
var images = ['http://www.tcdesignstamford.co.uk/random/4.jpg',
'http://www.tcdesignstamford.co.uk/random/1.jpg', 'http://www.tcdesignstamford.co.uk/random/2.jpg', 'http://www.tcdesignstamford.co.uk/random/3.jpg', 'http://www.tcdesignstamford.co.uk/random/4.jpg', '5http://www.tcdesignstamford.co.uk/randon/.jpg', 'http://www.tcdesignstamford.co.uk/random/6.jpg', 'http://www.tcdesignstamford.co.uk/random/7.jpg' ];
var image = images[Math.floor(Math.random()*images.length)];
return image;
function displayRandomImage()
var htmlImage = document.getElementById("randomImage");
htmlImage.src = getRandomImage();
displayRandomImage();
</script>
</body>
</html>
【问题讨论】:
【参考方案1】:// ImagesSrc = [<image_url>,...]
function changeImage()
// ind is random Integer between 0-ImagesSrc.length
let ind = Math.floor(Math.random() * ImagesSrc.length);
document.getElementById('randomImage').src = ImagesSrc[ind];
【讨论】:
以上是关于将计时器和网络链接添加到随机图像系统?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Firebase Web 将图像从链接保存到 Firebase 存储?