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

这是我最近在一个项目中的做法：

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 是您拥有的图像数量 -1，因为它从 0 开始1)，然后使用 setRandomCLass 函数将该随机图像作为背景图像应用到 div。

编辑：忘了提到在页面加载时启动 setRandomClass 函数，上面的代码可以放在页面头部的 javascipt 脚本块中。

Answer 2

我越来越近了！！！

我稍微修改了代码

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

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 4

我会定义一个 css 类背景图片，例如：

.productBoxBg {...}

将其添加到拳头div：

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

随产品页面动态生成。在那里你可以放你随机选择的图片。