div的随机背景图像

Question

我有一个ASP.NET网站，其中显示了数据库中的许多产品。目前，每个产品的背景图像都是在productBox类的CSS中设置的。我想要的是每个产品有一个随机的背景图像从4个图像选择。我在想，使用jquery将是未来的发展方向？

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

Answer 1

我离得更近了！

我稍微修改了一下代码

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

            }
        }

单步执行代码似乎分配了一个随机数，并选择了不同的情况，但在呈现页面时，我只渲染了一个背景图像。

Answer 2

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

您可以通过对Math.random()返回的结果进行一些操作来获得random_pos。

例如：

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

Answer 3

我将定义一个css类背景图像，例如：

.productBoxBg {...}

将其添加到第一个div：

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

在飞行中生成的产品页面。在那里你可以放置你随机选择的图像。