1. 홈
  2. 질의 응답
  3. 콘텐츠 이미지를 임의로 변경하십시오.

콘텐츠 이미지를 임의로 변경하십시오.

2014-03-06 2 views
0

div id = content 및 div id = content-right에 내 홈페이지에 임의로 사진을 표시하고 싶습니다. 나는 document.getElementById ('content-right') 함수를 사용했다. 내 콘텐트를 div 콘텐트 오른쪽 img로 만들지 만 div에서 무작위로 사진을 변경할 수는 없습니다. 어떤 도움을 주시면 감사하겠습니다.콘텐츠 이미지를 임의로 변경하십시오.

Here is my HTML: 
    <body> 


    <div id="header"> 
    <ul> 
    <div id="wrapper"> 
     <li class="logo">Liquor.com.ph</li> 
     <li>Homes</li> 
     <li>Offices</li> 
     <li>Products</li> 
     <li></li> 
     <li></li> 
     </div> 
    </ul> 

    </div> 
    <div id="center"> 
    <div id="slider"> 


    <ul class="slides"> 
     <input type="radio" name="radio-btn" id="img-1" checked /> 
     <li class="slide-container"> 
      <div class="slide"> 
      <img src="http://sathiyam.tv/english/wp-content/uploads/2013/10/06.jpg" /> 
     <p class="text">Liquor.com.ph Beta</p><p class="subtext">Welcome to Liquor.com.ph</p> 
      </div> 
     <div class="nav"> 
      <label for="img-6" class="prev">&#x2039;</label> 
      <label for="img-2" class="next">&#x203a;</label> 

     </div> 

     </li> 

     <input type="radio" name="radio-btn" id="img-2" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" /> 
      <p class="text">Liquor.com.ph Beta</p><p class="subtext">Welcome to Liquor.com.ph</p> 
      </div> 
     <div class="nav"> 
      <label for="img-1" class="prev">&#x2039;</label> 
      <label for="img-3" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-3" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" /> 
       <p class="text">Liquor.com.ph Beta</p><p class="subtext">Welcome to Liquor.com.ph</p> 
      </div> 
      <div class="nav"> 
       <label for="img-2" class="prev">&#x2039;</label> 
       <label for="img-4" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-4" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" /> 
      <p class="text">Liquor.com.ph Beta</p><p class="subtext">Welcome to Liquor.com.ph</p> 
    </div> 
      <div class="nav"> 
       <label for="img-3" class="prev">&#x2039;</label> 
       <label for="img-5" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-5" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" /> 
      <p class="text">Liquor.com.ph Beta</p><p class="subtext">Welcome to Liquor.com.ph</p> 
      </div> 
      <div class="nav"> 
       <label for="img-4" class="prev">&#x2039;</label> 
       <label for="img-6" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <input type="radio" name="radio-btn" id="img-6" /> 
     <li class="slide-container"> 
      <div class="slide"> 
       <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" /> 
       <p class="text">Liquor.com.ph Beta</p><p class="subtext">Welcome to Liquor.com.ph</p> 
      </div> 
      <div class="nav"> 
       <label for="img-5" class="prev">&#x2039;</label> 
       <label for="img-1" class="next">&#x203a;</label> 
      </div> 
     </li> 

     <li class="nav-dots"> 
      <label for="img-1" class="nav-dot" id="img-dot-1"></label> 
      <label for="img-2" class="nav-dot" id="img-dot-2"></label> 
      <label for="img-3" class="nav-dot" id="img-dot-3"></label> 
      <label for="img-4" class="nav-dot" id="img-dot-4"></label> 
      <label for="img-5" class="nav-dot" id="img-dot-5"></label> 
      <label for="img-6" class="nav-dot" id="img-dot-6"></label> 
     </li> 
    </ul> 
    </div> 

    <div id="sidebar"> 

    <ul> 
    <p>ADS</p> 
     <li><img src="http://s2.paultan.org/image/2013/06/2014-toyota-corolla-eu-0006-850x434.jpg"> </li> 
     <p>ADS</p> 
    <li><img src="http://s2.paultan.org/image/2013/06/2014-toyota-corolla-eu-0006-850x434.jpg"> </li> 
    <p>ADS</p> 
    <li><img src="http://s2.paultan.org/image/2013/06/2014-toyota-corolla-eu-0006-850x434.jpg"> </li> 
    <p>ADS</p> 
     <li><img src="http://s2.paultan.org/image/2013/06/2014-toyota-corolla-eu-0006-850x434.jpg"> </li> 
     <p>ADS</p> 
     <li><img src="http://s2.paultan.org/image/2013/06/2014-toyota-corolla-eu-0006-850x434.jpg"> </li> 
     <p>ADS</p> 



    </ul> 


    </div> 

    <div id="content-right"> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 

    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 



    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 



    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 

    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 

    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 





    </div> 

     <div id="content"> 

    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 



    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 

     <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


    <img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg" class="floatLeft"> 
    <h4>BOMBAY SAPPHIRE <br />DISTILLED <br />LONDON DRY GIN</h4><p class="width">The images are contained within the paragraph tag.</p> 


      </div> 


     </div> 




    <div id="footer"> 
    <h2>Liquor.com.ph</h2> 
    <div id="footercontent"> 

    <ul class="footer1"> 
    <li>About us</li> 
    <li>About us</li> 
    <li>About us</li> 
    <li>About us</li> 
    <li>About us</li> 
    <li>About us</li> 
    </ul> 

    <ul class="footer2"> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    </ul> 

    <ul class="footer3"> 
    <li>Vision</li> 
    <li>Vision</li> 
    <li>Vision</li> 
    <li>Vision</li> 
    <li>Vision</li> 
    <li>Vision</li> 
    </ul> 

    <ul class="footer5"> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    </ul> 

    <ul class="footer4"> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    <li>Mission</li> 
    </ul> 



    </div><!-----footer content------------------------> 

    </div><!-----footer-------------------------------> 
    <div id='footercopy'> 

    <p>Copyright 2014 &nbsp<a href="netsolutionstechnologies.com">Netsolutions Technologies</a></p> 

    </div> 




    <div id="img"> 

    <img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Flaming_cocktails.jpg"> 

    </div> 


    </body> 
    </html> 



    Here is my CSS: 
    html,body 
     { 
     height:100%; 
     } 
     body 
     { 
     font-family: 'Open Sans Condensed', sans-serif; 
     } 
     h1 
     { 
     font-size:30px; 
     } 
     #img 
     { 
     position: fixed; 
     top: -50%; 
     left: -50%; 
     width: 200%; 
     height: 200%; 
     } 
     #img img 
     { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: auto; 
     min-width: 50%; 
     min-height: 50%; 
     } 
     #center 
     { 
     position:relative; 
     z-index:10; 
     top:0; 
     background:white; 
     width:960px; 
     margin-right:auto; 
     margin-left:auto; 
     min-height:1000px; 
     padding:20px; 
     } 
     #header 
     { 
     position:relative; 
     z-index:20; 
     color:white; 
     position:fixed; 
     top:0; 
     width:1700px; 
     margin-right:auto; 
     margin-left:-10px; 
     background:silver; 
     opacity:0.7; 
     } 
     #wrapper 
     { 
     width:960px; 
     margin-right:auto; 
     margin-left:auto; 
     } 
     #header li 
     { 
     display:inline; 
     padding-right:20px; 
     } 
     .logo 
     { 
     font-family: 'Lobster', cursive; 
     font-size:30px; 
     color:blue; 
     } 
     /*slider*/ 
     @import url(http://fonts.googleapis.com/css?family=Varela+Round); 



     .slides { 
     width:960px; 
     padding-right:65px; 
     height:420px; 
     display: block; 
     position: relative; 
     z-index:11; 
     } 

     .slides * { 
      user-select: none; 
      -ms-user-select: none; 
      -moz-user-select: none; 
      -khtml-user-select: none; 
      -webkit-user-select: none; 
      -webkit-touch-callout: none; 
     } 

     .slides input { display: none; } 

     .slide-container { display: block; } 

     .text{ 
     background:silver; 
     text-align:center; 
     opacity:0.7; 
     width:30%; 
     color:white; 
     position:relative; 
     position:absolute; 
     right:100px; 
     margin-top:-400px; 
     font-family: 'Lobster', cursive; 
     font-size:30px; 
     color:blue; 
     } 
     .subtext 
     { 
     color:white; 
     font-family: 'Open Sans Condensed', sans-serif; 
     font-size:30px; 
     opacity:0.7; 
     background:black; 
     text-align:center; 
     position:relative; 
     position:absolute; 
     right:110px; 
     width:350px; 
     margin-top:-260px; 
     } 
     .slide 
     { 
     top: 0; 
     left:-11px; 
     opacity: 0; 
     margin-left:auto; 
     margin-right:auto; 
     width:100%; 
     height:100%; 
     text-align:center; 
      display: block; 
      position: absolute; 

      transform: scale(0); 
      -moz-transform: scale(0); 
      -webkit-transform: scale(0); 

      transition: all .7s ease-in-out; 
      -moz-transition: all .7s ease-in-out; 
      -webkit-transition: all .7s ease-in-out; 
     } 

     .slide img { 
     margin-right:auto; 
     width:960px; 
     margin-left:-83px; 
     margin-top:-10px; 
     height:110%; 
     text-align:center; 

     } 

     .nav label { 
      width: 100px; 

      display:none; 
      position: absolute; 
      margin-left:-35px; 
      margin-right:110px; 
      padding:auto; 

      opacity: 0; 
      z-index: 9; 
      cursor: pointer; 

      transition: opacity .2s; 
      -moz-transition: opacity .2s; 
      -webkit-transition: opacity .2s; 

      color:black; 
      font-size: 100px; 
      text-align: center; 
      line-height: 380px; 
      font-family: "Varela Round", sans-serif; 
      background-color: rgba(255, 255, 255, .3); 
      text-shadow: 0px 0px 15px rgb(119, 119, 119); 
     } 

     .slide:hover + .nav label { opacity: 0.5; } 

     .nav label:hover { opacity: 1; } 

     .nav .next { right: 0; } 


     input:checked + .slide-container .slide { 
      opacity: 1; 

      transform: scale(1); 
      -moz-transform: scale(1); 
      -webkit-transform: scale(1); 

      transition: opacity 1s ease-in-out; 
      -moz-transition: opacity 1s ease-in-out; 
      -webkit-transition: opacity 1s ease-in-out; 
     } 

     input:checked + .slide-container .nav label { display: block; } 

     .nav-dots { 
      width: 960px; 
      bottom: 0px; 
      height: 1px; 
      display: block; 
      position: absolute; 
      text-align:center; 
     } 

     .nav-dots .nav-dot { 
      top: -5px; 
      width: 11px; 
      height: 11px; 

      position: relative; 
      border-radius: 100%; 
      display: inline-block; 
      background-color: rgba(0, 0, 0, 0.6); 
     } 

     .nav-dots .nav-dot:hover { 
      cursor: pointer; 
      background-color: rgba(0, 0, 0, 0.8); 
     } 

     input#img-1:checked ~ .nav-dots label#img-dot-1, 
     input#img-2:checked ~ .nav-dots label#img-dot-2, 
     input#img-3:checked ~ .nav-dots label#img-dot-3, 
     input#img-4:checked ~ .nav-dots label#img-dot-4, 
     input#img-5:checked ~ .nav-dots label#img-dot-5, 
     input#img-6:checked ~ .nav-dots label#img-dot-6 { 
      background: rgba(0, 0, 0, 0.8); 
      } 

     /*content*/ 
     #content 
     { 
     padding-top:80px; 
     width:500px; 
     } 
     .floatLeft 
     { 
     float:left; 
     margin: 4px; 

     } 
     .floatRight 
     { 
     float: right; 
     margin: 4px; 
     } 
     #content img 
     { 
     width:100px; 
     height:100px; 
     padding:20px; 
     } 
     .width 
     { 
     width:250px; 
     padding:10px 30px; 
     } 
     #sidebar 
     { 
     margin-top:50px; 
     float:right; 
     min-height:1500px; 
     text-align:center; 
     } 
     #sidebar img 
     { 
     width:150px; 
     height:150px; 
     } 
     #sidebar li 
     { 
     list-style:none; 
     padding:10px; 

     } 
     #content-right 
     { 
     padding-top:80px; 
     width:450px; 
     float:right; 
     } 
     #content-right img 
     { 
     width:100px; 
     height:100px; 
     padding:20px; 
     } 
     #footer 
     { 
     position:relative; 
     z-index:100; 
     left:-10px; 
     width:1700px; 
     clear:both; 
     background:black; 
     margin-top:-23px; 
     min-height:300px; 
     margin-right:auto; 
     margin-left:auto; 
     text-align:center; 
     overflow:hidden; 
     opacity:0.7; 
     color:white; 
     font-family: 'Lato', sans-serif; 
     } 
     #footercontent 
     { 
     width:1024px; 
     font-weight:20px; 
     margin-right:auto; 
     margin-left:auto; 
     color:white; 
     font-family: 'Lato', sans-serif; 
     } 
     .footer1 
     { 
     float:left; 
     list-style:none; 
     padding-right:100px; 
     } 
     .footer2 
     { 
     float:left; 
     list-style:none; 
     padding-right:100px; 
     } 
     .footer3 
     { 
     float:left; 
     list-style:none; 
     padding-right:100px; 
     } 
     .footer4 
     { 
     float:left; 
     list-style:none; 
     padding-right:100px; 
     } 
     .footer5 
     { 
     float:left; 
     list-style:none; 
     padding-right:100px; 
     } 

     #footercopy 
     { 
     position:relative; 
     z-index:100; 
     position:fixed; 
     left:0; 
     bottom:0; 
     opacity:0.7; 
     background:silver; 
     color:white; 
     text-align:center; 
     padding:20px; 
     margin-bottom:-10px; 
     width:1700px; 
     margin-left:-10px; 
     font-family: 'Lato', sans-serif; 
     } 
     #footercopy a 
     { 
     text-decoration:none; 
     color:white; 
     } 
     #footercopy a:hover 
     { 
     color:blue; 
     text-decoration:underline; 
     } 


    Here is my Javascript: 

//Javascript: 
//http://jsfiddle.net/LjPLp/ 

//You can increase the images by adding more links to the array 


var array = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg','http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg','http://www.interaksyon.com/interaktv/assets/2014/03/gilas-vic-sotto.jpg']; 
function shuffle(array) { 
var currentIndex = array.length; 
var temporaryValue; 
var randomIndex; 
    while (0 !== currentIndex) { 
    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 
    temporaryValue = array[currentIndex]; 
    array[currentIndex] = array[randomIndex]; 
    array[randomIndex] = temporaryValue; 
    } 
    return array; 
} 
var shuffled_images = shuffle(array); 
var yourbackground = document.getElementById('content-right'); 
yourbackground.style.backgroundImage = 'url(' + shuffled_images[0] + ')' ;

출처

2014-03-06 chris

+0

당신이 http://jsfiddle.net/ –

+0

http://jsfiddle.net/sQS5D/1/ – chris

+0

이것은 제공하는 데 도움이 'document.getElementById ('content-right img')''Queryselector' 또는 클래스 사용하기 –

답변

1

class을 사용하여 요소를 선택해야합니다. 아래와 같이 :

var shuffled_images = shuffle(array); 
var content_right = document.getElementById('content-right'); 
var yourbackground = content_right.getElementsByClassName('floatLeft'); 
for(i=0;i<=yourbackground.length;i++){ 
    yourbackground[i].src = shuffled_images ; 
}

Working DEMO

월 이것은 당신이 ..

출처

2014-03-06 11:46:50

관련 문제

 관련 문제