2017-04-04 84 views
0

我想改变图像刷新页面后之后,但它不工作改变图像刷新页面

这里是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> 

回答

0

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>

0

onload属性不支持<nav>元件上。试一试<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>

0

独立CSSJSHTML

声明可变因素如

var theImages = [], 
    size, x; 

卸下的onload()函数。 重写随机函数如下。

x = Math.floor(Math.random()* size);

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>