我想在页面刷新时更改背景图像模式.我试过很多代码,但没有按要求工作
I want to change background image pattern on page refresh. i have tried many codes but not working as i required
这是我想要在页面刷新时更改图像的完整代码。这是我正在使用但不起作用的代码。
<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
theImages[0] = 'images/1.png'
theImages[1] = 'images/2.png'
theImages[2] = 'images/3.png'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==1){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==2){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==3){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
else if(whichImage==4){
document.write('<a href ="link.html">
<img src="'+theImages[whichImage]+'"');
}
}
</SCRIPT>
这是我想要更改图像的html代码。在那里我调用了脚本函数。
<div class="under_header" style="height:600px;margin-top:0px; background:url(<script>showImage();</script>) , url(images/latest_movie/<?php echo $movie_image; ?>) center 76px fixed no-repeat; -moz-background-size:auto, over; background-size:auto, cover;
box-shadow: inset 945px 0px 645px -645px black, inset -945px 0px 645px -645px black;">
</div>
不能将script
标记放在样式属性的CSS字符串中。
在JavaScript中尝试这样的东西,而不是在CSS:中
document.getElementsByClassName("under_header")[0].style.background = "url("+showImage()+") , url(images/latest_movie/<?php echo $movie_image; ?>) center 76px fixed no-repeat";
不知道您是否已经解决了问题,但正如Jacques所说,您调用脚本的方式不起作用。
检查"whichImage"的值是不必要的,你可以这样做:
function showImage() {
$('.under_header').append('<a href ="link.html"><img src="' + theImages[whichImage] + '"></a>');
}
这是一把小提琴,人们喜欢小提琴。https://jsfiddle.net/Sprazer/va9j5sb0/
很抱歉使用jQuery
尝试组合javascript和css的方式是行不通的。以下示例将背景图像随机设置为目标分区。
函数showImage
是在onload
事件上调用的。因此,每次刷新页面时,div都会有不同的背景图像。
使用此示例可以构建页面刷新所需的任何功能。
<html>
<head>
<script language="JavaScript">
var theImages = new Array();
theImages[0] = 'images/1.jpg';
theImages[1] = 'images/2.jpg';
theImages[2] = 'images/3.jpg';
var p = theImages.length;
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.getElementById('myDiv').style.backgroundImage="url('" + theImages[whichImage] + "')";
}
</script>
</head>
<body onload="showImage()">
<div id="myDiv" style="width:300px; height: 200px;" />
</body>
</html>
相关文章:
- 为什么我需要在setTimeout中有匿名函数才能使此代码工作
- ajax代码工作时,使用javascript禁用html中的链接
- Javascript 新手到忍者无法让书籍代码工作
- 设计代码工作流程
- 在 Java 脚本中使用追加时 HTML 标记不起作用,但在执行硬编码时 html 代码工作正常
- 如何使以下 JavaScript 代码工作并生成 ID 为 “myDivId” 的元素内的名称和年龄列表:
- 函数停止代码工作
- 如何使替换代码工作
- 我无法让这个高图表代码工作,有谁知道为什么它不起作用
- 代码工作 jsfiddle 不适用于 dreamweaver
- jQuery Keyup 不能从代码工作,而是从 Chrome.console 工作
- Web服务器代码工作不正常
- 求和代码工作不正常
- 启用JS评测时,JavaScript代码工作得更快?什么
- 为什么获胜't这个极其简单的Javascript代码工作
- 我的Javascript代码工作不正常
- js代码工作是JSfiddle,但不是在我的浏览器
- 我有反应标签代码工作完美,但我需要改变html结构
- JQuery登录如果语句代码工作不正常则注销
- 我如何使这段代码工作自定义'Facebook Like Box'