Случайное фоновое изображение для div

Question

У меня есть сайт ASP.NET, который показывает несколько продуктов из базы данных. На данный момент фоновое изображение для каждого продукта установлено в CSS в классе productBox. То, что я хотел бы, чтобы у каждого продукта было случайное фоновое изображение из выбора 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

Я бы определил фоновое изображение класса CSS, например:

.productBoxBg {...}

добавить его в кулачный div:

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

Генерируется на лету со страницей товара. Там Вы можете разместить свое случайно выбранное изображение.

Answer 3

Вот как я это сделал для проекта, над которым я недавно работал:

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), а затем примените это случайное изображение в качестве фонового изображения к элементу div с помощью функции setRandomCLass.

РЕДАКТИРОВАТЬ: забыл упомянуть, чтобы запустить функцию setRandomClass при загрузке страницы, код выше вы можете поместить в блок сценария javascipt в заголовке страницы.

Answer 4

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