如何使用HTML/Javascript在WordPress文本小部件中顯示一系列隨機圖像？

我在Dreamhost上使用WordPress 3.0.5，試圖在邊欄中創建一個文本小部件，它將顯示隨機設置的九（9）個客戶端徽標。總共有12個徽標位於/ wp-content/clients文件夾中，名稱爲logo1.jpg thru logo12.jpg。如何使用HTML/Javascript在WordPress文本小部件中顯示一系列隨機圖像？

這個想法是隨機選擇第一個圖像，然後按順序獲取下8個圖像，以避免重複。

UPDATE

得到它的工作，感謝您的提示大家！

下面是最終，工作版本：

<div id="client-logos"></div> 

<script type="text/javascript"> 

TotalLogos = 12;  
FirstPart = '<img src="/wp-content/clients/logo'; 
LastPart = '.jpg" height="50" width="110" />'; 

var r = Math.ceil(Math.random() * TotalLogos); 

var content = document.getElementById('client-logos').innerHTML; 
document.getElementById('client-logos').innerHTML = FirstPart + r + LastPart; 

var t=0; 
for (t=0;t<8;t++) 
    { 
     if (r == TotalLogos) { r=0; } 
     r++; 
     var content = document.getElementById('client-logos').innerHTML; 
     document.getElementById('client-logos').innerHTML = content + FirstPart + r + LastPart; 
    } 

</script>

來源

2011-02-23 Shaun Scovil

首先，關閉您的圖像標籤！ – Endophage 2011-02-23 16:36:58

你的for循環設置應該有一個<=像這樣：（t = 0; t <= 8; t ++）雖然這將顯示總共10個徽標，因爲您已經在循環之前輸出了一個，所以真的要嚴格小於：（t = 0; t <8; t ++）如果您認爲這會輸出8個徽標，請嘗試從0到7進行計數。 – Endophage 2011-02-23 16:40:58

document.write（）的運行頁面加載完成之前.. 你應該使用別的東西..

首先，你應該通過ID得到你的div容器的對象：

您的HTML：

<div id="containerid"></div> 

<script> 
var elem = document.getElementById('containerid'); 
elem.innerHTML= "FirstPart + r + LastPart"; 
</script>

來源

2011-02-23 17:01:54 DrStrangeLove

謝謝Doc！該解決方案必須涉及innerHTML，基於Google的快速搜索告訴我的內容，但我無法完全實現它。有任何想法嗎？ – 2011-02-23 17:39:54

查看更新...... – DrStrangeLove 2011-02-23 17:50:35

再次感謝DSL。我花了一段時間纔得到這個工作，因爲我仍然把代碼放在一個函數中，這正在搞砸了。我會在上面添加我的最終工作代碼... – 2011-02-24 15:48:41

只需將t=8更改爲t<8即可使用（對我而言）。 for循環中的第二個表達式意思是：「只要這是真的就執行foor循環」。您的代碼必須執行，只要t < 8;當t == 8時，應該停止。

工作示例：http://jsfiddle.net/m7m7C/

來源

2011-02-23 17:02:57 pimvdb

謝謝pimvdb，很好的接收！現在如何在不使用document.write（）的情況下顯示圖像，正如DrStrangeLove指出的那樣是主要問題... – 2011-02-23 17:38:17

您可以在所有文檔函數可用後使用jQuery執行函數。所以，'document.wirte'確實有效。如果可能的話，嘗試使用jQuery - 但是再次，我不知道關於WordPress的任何內容以及如何將jQuery集成到它中。 – pimvdb 2011-02-23 18:02:46

我確實愛上了一些jQuery，但沒有它就能夠達到預期的效果 - 而且沒有太多的代碼。見上面，並感謝您的幫助！ – 2011-02-24 15:59:01

如何使用HTML/Javascript在WordPress文本小部件中顯示一系列隨機圖像？

回答

相關問題