刷新页面后更改图像
[英]change the image after refresh the page
问题描述
我想在刷新页面后更改图像，但是它不起作用
这是javascript部分
<script>
var theImages = [
"../images/casblanca.jpg",
"../images/casblanca2.jpg",
"../images/spot.jpg";
];
function changeImage(){
var size=theImages.length;
var x = Math.floor(size*Math.random())
document.getElementById("spotlight").src = theImages[x];
}
</script>
这是html的主要部分
<nav class="spot" onload="changeImage()">
<h1>SPOTLIGHT</h1>
<a href="play.html"><img id="spotlight" width="1000" height="600" alt=""></a>
</nav>
3 个解决方案
解决方案1
0 2017-04-04 03:34:00
<nav>元素不支持onload属性。 在<body>上尝试
您的图像数组中也存在语法错误。 不必要的分号。
请参见下面的工作示例：
var theImages = [ "https://dummyimage.com/1000x600/000/fff&text=Image+1", "https://dummyimage.com/1000x600/000/f0f&text=Image+2", "https://dummyimage.com/1000x600/000/ff0&text=Image+3" ]; function changeImage(){ var size=theImages.length; var x = Math.floor(size*Math.random()) document.getElementById("spotlight").src = theImages[x]; }
<body onload="changeImage()"> <nav class="spot" > <h1>SPOTLIGHT</h1> <a href="play.html"><img id="spotlight" width="1000" height="600" alt=""></a> </nav> </body>
解决方案2
0 已采纳 2017-04-04 03:35:36
1）您使用的是多余的半冒号（;）
“../images/spot.jpg”;
在最后一张图片的末尾。 继续删除它。
2）在body标签中使用onload事件。
这是一个可行的解决方案。 希望能帮助到你！
var theImages = [ "http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ford-gt-photo-658253-s-original.jpg", "https://carfromjapan.com/wp-content/uploads/2016/10/5-Best-Rated-Cars-of-2016.jpg", "https://i.ytimg.com/vi/TzcS7Mcq2oA/maxresdefault.jpg" ]; function changeImage(){ var size=theImages.length; var x = Math.floor(size*Math.random()) document.getElementById("spotlight").src = theImages[x]; }
<body onload="changeImage()"> <nav class="spot"> <h1>SPOTLIGHT</h1> <a href="play.html"><img id="spotlight" width="1000" height="600" alt=""></a> </nav>
解决方案3
0 2017-04-04 03:51:39
单独的CSS ， JS和HTML 。
将变量声明为
var theImages = [],
size, x;
删除onload（）函数。 如下重写随机函数。
x = Math.floor（Math.random（）*大小）;
Math.random（）返回介于0（含）和1（不含）之间的浮点伪随机数。 在这里Math.floor总是返回0,1,2之间的值。
如下重写代码。
size = theImages.length;
x = Math.floor(Math.random() * size);
document.getElementById("spotlight").src = theImages[x];
var theImages = [], size, x; theImages = [ "https://www.w3schools.com/w3css/img_car.jpg", "https://www.w3schools.com/css/paris.jpg", "https://www.w3schools.com/css/trolltunga.jpg" ]; size = theImages.length; x = Math.floor(Math.random() * size); document.getElementById("spotlight").src = theImages[x];
#spotlight { width: 1000px; height: 600px; }
<h1>SPOTLIGHT</h1> <a href="#"><img id="spotlight" alt=""></a>
更改页面刷新背景图片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.