javascript - Change the content images randomly -
i want randomly show photos on home page on div id=content , div id=content-right. i've used function document.getelementbyid('content-right'); make grab div content-right img unable change photos on div randomly. assistance appreciated.
here 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 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 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 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 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 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 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 contained within 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 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: .7s ease-in-out; -moz-transition: .7s ease-in-out; -webkit-transition: .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 { text-decoration:none; color:white; } #footercopy a:hover { color:blue; text-decoration:underline; } here javascript: //javascript: //http://jsfiddle.net/ljplp/ //you can increase images adding more links 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] + ')' ;
you have select element using class. below :
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 ; } may helps ..
Comments
Post a Comment