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>

页面加载完成后，图像是否需要更改？如果前者，您可以使用代码隐藏在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; 
       } 

      } 
     }

逐步执行代码出现分配一个随机数，并选择不同的情况，但是当页面呈现我只得到一个背景图像呈现。

答

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);

答

我会定义CSS类的背景图像，例如：

.productBoxBg {...}

它添加到拳头格：

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

生成与产品页面的飞行。你可以把你的随机选择的图像。

这就是他现在正在做的事情...... – 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脚本块中。

div的随机背景图片

相关推荐