Simple user slideshow

Technorealm. The UK web site design company

Free javascript

[One of a collection of free javascripts from www.technorealm.co.uk]


slideshow here

Previous    Go Next

This scripts allows your viewers to cycle forward and backwards through a set of images. You can display as many images as you like, just add additional images where indicated, then change the number 5 where it appears in the script to the total number needed.

This part goes in the <HEAD> section of your HTML.

<script language="JavaScript">
<!--
	var x = 1
	images = new Array
	images[1] = "1st image path/filename"
	images[2] = "2nd image path/filename"
	images[3] = "3rd image path/filename"
	images[4] = "4th image path/filename"
	images[5] = "5th image path/filename"
//add additional images here as required

function backimg(){
	if (x != 1){
		document.image1.src = images[x-1]
		x--	}
}
function fwdimg(){
	if (x != 5){		//Change the 5 here to your total number 
		document.image1.src = images[x+1]
		x++	}
}
// -->
</script>

Here are the image and control buttons. Add this where you want it to display on your page. Now change the path/filename of your 1st image where shown, and the names of your fwd/back buttons. If you don't want to use graphic buttons, just remove the <img> tags and add text as usual.

<IMG SRC="1st image path/filename" name="image1" border=0><br>
<a href="" onClick="backimg();return false;"><img src="ssback.gif" border=0 width=30 height=16></a>   
<A href="" onClick="fwdimg(); return false;"><img src="ssfwd.gif" border=0 width=30 height=16></a>

www.technorealm.co.uk UK Web site design and graphics. A free resources site!