div的隨機背景圖片

我有一個ASP.NET網站，顯示了一些數據庫中的產品。目前，每個產品的背景圖像都是在productBox類的CSS中設置的。我想要的是每種產品都有4張圖片的隨機背景圖片。我在想，使用jquery會是前進的方向？div的隨機背景圖片

<div class="productBox"> 
    <div class="productouter"> 
     <div class="productImageContainer"> 
     <a id="ctl00_ContentPlaceHolder1_catalogList_dlCatalog_ctl01_hlImageLink" class="productImage" href="Product-Flea-Monkey-Jacket_23.aspx"><img src="repository/product/thumbs/150x150_NB701-FLEA-MONKEY-JACKET-close-front.jpg" style="border-width:0px;" /></a> 
     </div> 

     <div class="productinner"> 
      <a id="ctl00_ContentPlaceHolder1_catalogList_dlCatalog_ctl01_hlProduct" class="catalogProductName" href="Product-Flea-Monkey-Jacket_23.aspx">Flea Monkey Jacket</a> 

      <span id="ctl00_ContentPlaceHolder1_catalogList_dlCatalog_ctl01_lblOurPrice" class="ourPrice">£ 96.00</span> 

      </div> 
    </div> 
</div>

來源

2009-09-10 Ian Houghton

頁面加載完成後，圖像是否需要更改？如果前者，您可以使用代碼隱藏在C＃中進行設置。如果是後者，jQuery將是一個不錯的選擇。 – 2009-09-10 11:19:44

頁面加載後，將有8個div與productBox類。我希望每個div都有一個從4中隨機選擇的背景圖片。我不需要再次更改它們。 – 2009-09-10 14:13:08

我越來越近了！

我已經改變了代碼稍微

<asp:DataList ID="dlCatalog" runat="server" SkinId="catalogList"> 
     <ItemTemplate> 
      <asp:Panel ID="productPanel" runat="server" >  
      <div class="productImageContainer"> 
      <asp:HyperLink ID="hlImageLink" runat="server" NavigateUrl='<%# GetNavigateUrl(Eval("ProductId").ToString(), Eval("Name").ToString()) %>' SkinID="noDefaultImage" /> 
      </div> 
      <asp:HyperLink ID="hlProduct" runat="server" NavigateUrl='<%# GetNavigateUrl(Eval("ProductId").ToString(), Eval("Name").ToString()) %>' Text='<%#Eval("Name") %>' CssClass="catalogProductName" /><br /> 
      <asp:Label ID="lblRetailPrice" runat="server" CssClass="retailPrice" /><asp:Label ID="lblOurPrice" runat="server" CssClass="ourPrice" /><br /> 
      <asp:Rating ID="ajaxRating" runat="server" SkinID="rating" ReadOnly="true" /> 
      </asp:Panel> 
     </ItemTemplate> 
    </asp:DataList>

背後的代碼：

foreach (DataListItem CatalogItem in dlCatalog.Items) 
     { 
      // Find Panel/Div Tag called productBackground within Datalist 
      Panel productBackground = (Panel)CatalogItem.FindControl("productPanel"); 

      // Some code here to generate a random number between 0 & 3 
      System.Random RandNum = new System.Random(); 
      int myInt = RandNum.Next(4); 

      if (productBackground !=null) 
      { 
       switch(myInt) 
       { 
        case 0: 
         productBackground.BackImageUrl = "../App_Themes/Theme/images/frame1.gif"; 
         break; 
        case 1: 
         productBackground.BackImageUrl = "../App_Themes/Theme/images/frame2.gif"; 
         break; 
        case 2: 
         productBackground.BackImageUrl = "../App_Themes/Theme/images/frame3.gif"; 
         break; 
        case 3: 
         productBackground.BackImageUrl = "../App_Themes/Theme/images/frame4.gif"; 
         break; 
       } 

      } 
     }

逐步執行代碼出現分配一個隨機數，並選擇不同的情況，但是當頁面呈現我只得到一個背景圖像呈現。

來源

2009-09-11 01:13:41

images = [url1, url2, url3, url4]; 
$('div.productImageContainer').css('background', images[random_pos]);

你可以得到一個random_pos一些操縱以上）通過的Math.random（返回的結果

例如

var random_pos = Math.round(Math.random() * images.length-1);

來源

2009-09-10 11:10:40

我會定義CSS類的背景圖像，例如：

.productBoxBg {...}

它添加到拳頭格：

<div class="productBox productBoxBgg">...</div>

生成與產品頁面的飛行。你可以把你的隨機選擇的圖像。

來源

2009-09-10 11:10:42

這就是他現在正在做的事情...... – 2009-09-10 16:33:01

是的，我讀過很快，並認爲他總體上存在這個問題。 – 2009-09-11 09:09:00

繼承人我是如何做的一個項目，我最近工作的：

var theClasses = new Array() 

theClasses[0] = 'url(--path to 1st image--)' 
theClasses[1] = 'url(--path to 2nd image--)' 
theClasses[2] = 'url(--path to 3rd image--)' 
theClasses[3] = 'url(--path to 4th image--)' 

var p = theClasses.length; 
var preBuffer = new Array() 
for (i = 0; i < p; i++) { 
    preBuffer[i] = new Object() 
    preBuffer[i].src = theClasses[i] 
} 
var whichClass = Math.round(Math.random() * 3); 
function setRandomClass() { 
    var getDiv = document.getElementById("site-head-image"); 
    getDiv.style.backgroundImage = theClasses[whichClass]; 
}

所以基本上，你創建一個數組與您的圖像所有路徑，建立一個數學函數來設置介於0的隨機數 - n，（n表示由於它從0開始而不是1開始的-1的圖像數量），然後使用setRandomCLass函數將該隨機圖像作爲背景圖像應用於div。

編輯：忘了提及在頁面加載時啓動setRandomClass函數，上面的代碼可以放在頁面頭部的javascipt腳本塊中。

來源

2009-09-10 11:18:18

div的隨機背景圖片

回答

相關問題