我想在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">‹</label>
<label for="img-2" class="next">›</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">‹</label>
<label for="img-3" class="next">›</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">‹</label>
<label for="img-4" class="next">›</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">‹</label>
<label for="img-5" class="next">›</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">‹</label>
<label for="img-6" class="next">›</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">‹</label>
<label for="img-1" class="next">›</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  <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] + ')' ;
答案 0 :(得分：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 ;
}
这可以帮助你..