Multiple Random Images Scroll

This example uses the blendTrans filter which is only available in IE, Mozilla reverts to a normal image change.

Additional displays can be created simply by defining another display and its array within the script as follows:

var displayName = new slideshow('elementName',speed,duration,random)
displayName.images_array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")

Where elementName is the name of the image holder and must be unique from the others.
The displayName must also be unique although the same is used to define the new slideshow and images_array

Positioning a display is done by using the normal flow of the document, tables or the CSS attribute position.

<script type="text/javascript">

<!--
// Realised by Apachejeff
//www.huntingground.freeserve.co.uk

var slide1 = new slideshow('slideshow1',7000,2,1) // name, speed (milliseconds), duration (seconds), random (0 = no, 1 = yes)
slide1.images_array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")

var slide2 = new slideshow('slideshow2',7000,3,1)
slide2.images_array("pic5.jpg","pic6.jpg","pic7.jpg","pic8.jpg")

var slide3 = new slideshow('slideshow3',7000,4,1)
slide3.images_array("pic9.jpg","pic10.jpg","pic11.jpg","pic12.jpg")

moz=document.getElementById&&!document.all

function slideshow(el_name,speed,duration,rand){
var index = 0
var timer = null
var show_random=rand
var images = new Array()
var rdm_images=new Array() 

this.images_array = function(){
preload = new Array()
for (i=0;i<arguments.length;i++){
images[i] = arguments[i]
preload[i] = new Image()
preload[i].src = images[i]
}

if(show_random==1){
total=images.length
for(p=0;p<arguments.length;p++){
rndnum=Math.floor(Math.random()*total)
rdm_images[p]=images.splice(rndnum,1)
total--
}
}

}

this.runshow = function(slide_name){
if (!moz) {document.images[el_name].filters.blendTrans.Apply()}
document.images[el_name].src = (show_random==1?rdm_images[index]: images[index])
if (!moz) {document.images[el_name].filters.blendTrans.Play(duration)}
index++
if(show_random==1&&index == rdm_images.length){
index = 0
}
else{
if(index == images.length){index = 0}
}

timer = setTimeout(slide_name+".runshow('"+slide_name+"')", speed)

}

this.stopslideshow = function(){
if (timer) clearTimeout(timer)
}

}

function initshows(){
slide1.runshow('slide1')
slide2.runshow('slide2')
slide3.runshow('slide3')
}

//  add onload="initshows()" to the opening body tag

// -->
</script>

<img src="default.jpg" name="slideshow1" alt="" style="width:125px;height:125px;filter:blendtrans()">
<img src="default.jpg" name="slideshow2" alt="" style="width:125px;height:125px;filter:blendtrans()">
<img src="default.jpg" name="slideshow3" alt="" style="width:125px;height:125px;filter:blendtrans()">



The small thumbnails act only as a visual reference for the images used in this example and are not part of the script or layout.