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

      } 
     } 

임의의 숫자를 할당하는 표시와 다른 케이스를 선택하지만 페이지가있는 경우 rendered 한 배경 이미지 만 렌더링됩니다.

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 class="productBox productBoxBgg">...</div> 

는 제품 페이지와 즉석에서 생성됩니다. 거기서 무작위로 선택한 이미지를 넣을 수 있습니다. 내가 프로젝트를 위해 그것을 어떻게

Answer 4

는 Heres는 내가 최근에 작업 :

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에 배경 이미지로 적용하십시오.

EDIT : 페이지로드시 setRandomClass 함수를 시작하는 것을 잊어 버린 경우 위의 코드는 페이지 머리에 javascipt 스크립트 블록에 넣을 수 있습니다.