Display a randomly selected image from a number of images.
Once an image has been shown it will not be selected again until all the images have be displayed.
The current sequence of the 18 images selected from an array of 18 images is as follows:
Notice that the same number is never selected twice.
Once all the images have been displayed the script is reset and a new random selection beings.
You can also select to show a set number of randomly chosen images by changing images.length at the line howMany=images.length to the number required.
So if you want to show 6 out of 18 then howMany=6
The script will now show a randomly selected 6 images at random.
Please note that this number cannot be greater than the images contained in the array.
<HTML>
<HEAD>
<TITLE>Random Images</TITLE>
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
images = ["pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg","pic06.jpg"]
var preloadImages=new Array() // preloads images
for(var i=0;i<images.length;i++) {
preloadImages[i]=new Image()
preloadImages[i].src=images[i]
}
howMany=images.length
numbersRange=new Array() // array to hold numbers to select from.
function init(){
myPic=document.getElementById("my_pic")
for(var n=0;n<images.length;n++){ // create list of numbers to choose from
numbersRange[n]=n
}
showPic()
}
num=0
function showPic(){
num++
if(myPic.filters){myPic.filters.blendTrans.Apply()}
rndnum=Math.floor(Math.random()*numbersRange.length)
chosenNumber=numbersRange.splice(rndnum,1) // select and remove selected number from array
myPic.src=images[chosenNumber]
timer=setTimeout("showPic()",3000)
if(myPic.filters){myPic.filters.blendTrans.Play(2)}
if(num==howMany){
clearTimeout(timer)
num=0
setTimeout("init()",3000)
}
}
// add onload="init()" to the opening BODY tag
// -->
</script>
</HEAD>
<BODY onload="init()">
<h1>Random Images</h1>
<img src="pic01.jpg" name="my_pic" style="width:100px;height:100px;filter:blendTrans()">
</BODY>
</HTML>