I have already created a java script slider for the index of a website I am working on. It displays three images in the slider. I have a database of images resized to what I want. I want to be able to make the three images on the page to be randomly selected from a database or a array of images every time the page is reloaded/visited
How can I randomize the images of slide1, slide2 and slide3?
<script>
var aca = Math.floor((Math.random()*3)+1);
var ath = Math.floor((Math.random()*3)+1);
var act = Math.floor((Math.random()*3)+1);
</script>
<div id="main_slide">
<div id="slide-buttons">
<button class='prev' onclick='mySwipe.prev()'><</button>
<a class='links' href="http://www.hrhsfalcons.com/academics">Academics</a>
<a class='links' href="http://www.hrhsfalcons.com/athletics">Athletics</a>
<a class='links' href="http://www.hrhsfalcons.com/clubs">Activities</a>
<button class='next' onclick='mySwipe.next()'>></button>
</div>
<script>
document.write("<div id='mySwipe' class='swipe'><div class='swipe-wrap'>");
document.write('<div id="slide1"><img src="http://www.hrhsfalcons.com/assets/img/aca_' +aca+ '.jpg" /></div>');
document.write('<div id="slide2"><img src="http://www.hrhsfalcons.com/assets/img/ath_' +ath+ '.jpg" /></div>');
document.write('<div id="slide3"><img src="http://www.hrhsfalcons.com/assets/img/act_' +act+ '.jpg" /></div>');
document.write('</div></div>');
</script>
</div>
Try this its working http://jsfiddle.net/qk3ES/
<body onload="loadRandomImages()">
<div id="main_slide">
<div id="slide-buttons">
<button class='prev' onclick='mySwipe.prev()'><</button>
<a class='links' href="http://www.hrhsfalcons.com/academics">Academics</a>
<a class='links' href="http://www.hrhsfalcons.com/athletics">Athletics</a>
<a class='links' href="http://www.hrhsfalcons.com/clubs">Activities</a>
<button class='next' onclick='mySwipe.next()'>></button>
<div id='mySwipe' class='swipe'>
<div class='swipe-wrap'>
<div id="slide1"><img id="slide1Img" /></div>
<div id="slide2"><img id="slide2Img" /></div>
<div id="slide3"><img id="slide3Img" /></div>
</div>
</div>
</div>
<script>
function loadRandomImages() {
var aca = Math.floor((Math.random() * 3) + 1);
var ath = Math.floor((Math.random() * 3) + 1);
var act = Math.floor((Math.random() * 3) + 1);
var slide1Src = 'http://www.hrhsfalcons.com/assets/img/aca_'+ aca +'.jpg';
var slide2Src = 'http://www.hrhsfalcons.com/assets/img/ath_' +ath+ '.jpg';
var slide3Src = 'http://www.hrhsfalcons.com/assets/img/act_' +act+ '.jpg';
document.getElementById('slide1Img').src = slide1Src;
document.getElementById('slide2Img').src = slide2Src;
document.getElementById('slide3Img').src = slide3Src;
}
</script>
</div>
</body>
You can add 1 button to refresh the images and in button click just call loadRandomImages() function. So that only three images will be refreshed not the whole document.