[英]Use javascript for a background image
我正在尋找其他帖子來解決這個問題(因為那里當然有)。 但是我什至沒有成功回答其他帖子。
然后,我的問題:
我有以下腳本來隨機打開圖像
<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.write(img[n]);
} </script>
然后,我想在其中使用這些圖像(而不是images / hochbau.jpg):
<div class="section22" style="background-image:url(images/hochbau.jpg); "> </div>
然后,我嘗試了這個:
<div class="section22" style="background-image:url(<script> banner(); </script>);"> </div>
或這個
<div class="section22" style="background-image:url(
<script type="text/javascript" language="javascript">
document.write('images/hochbau'+ Math.round((Math.random()*9)+1)+ '.jpg');
</script>
); "> </div>
然后,我將腳本更改為:
<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById('myPElement').style.backgroundImage = 'url(img[n])';
} </script>
與以下
<div class="section22" id="myPElement">
但是什么都沒有起作用.....也許我不了解該解決方案,但是我被困住了...
如果您有任何觀察,請告訴我! 非常感謝您的幫助
您只是在腳本中沒有正確引用圖像
<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById('myPElement').style.backgroundImage = 'url(' + img[n] +')'; //you are passing img[n] as string, just change this
} </script>
編輯:我看到您的頁面: http : //www.mytmedia.craym.eu/HRPwebsite/index.php
從代碼檢查中,我看到banner()函數從未執行過,而且如果我嘗試在控制台中執行它,則背景圖像設置正確,但是您的圖像不存在:
這應該工作
document.getElementById("myPElement").style.backgroundImage = "url("+img[n]+")";
嗨,非常感謝您的幫助。
我的代碼中出錯的地方是:1-在腳本中使用了函數。 我只需要使用腳本但不使用“功能” 2,當然“ url(img [n])”的形式是錯誤的。
最適合我的代碼(我已經在本地測試過,我不得不在線測試過)
<div id="myPElement" class="section22" ></div>
<script>
var img = new Array();
img[0]='http://localhost:8888/images/hochbau1.jpg';
img[1]='http://localhost:8888/images/hochbau2.jpg';
img[2]='http://localhost:8888/images/hochbau3.jpg';
img[3]='http://localhost:8888/images/hochbau4.jpg';
img[4]='http://localhost:8888/images/hochbau5.jpg';
img[5]='http://localhost:8888/images/hochbau6.jpg';
img[6]='http://localhost:8888/images/hochbau7.jpg';
img[7]='http://localhost:8888/images/hochbau8.jpg';
img[8]='http://localhost:8888/images/hochbau9.jpg';
img[9]='http://localhost:8888/images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById("myPElement").style.backgroundImage = "url(" + img[n] +")";
</script>
Evrything正在運行...。照片隨機出現。
非常感謝您的幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.