Random Images rotation webcode

[CamelMan]

I am looking at creating something to do the following kind of idea:

 

>Display an image on a website from a selection

>Click a button

>The image cycle through the list of images before randomly selecting a new one

 

The idea is a bit like the student name selectors but for a bunch of images.

 

I've created something in PHP but Im now not sure that this is the way to go due to the button - my one refreshes the page, which works but is a bit of a cheat! Also I am looking at putting this on to a page with other things so a number of full page refreshes could hurt the eyes!

 

Is it better to recode into Python, JavaScript etc and does anyone have something similar that they are wiling to share?

[spadam]

I'm going home now but I've had a go at something basic in Javascript to give you an idea of how it might work. You might need to tweak it a bit depending on your needs. Let me know if you have any further questions after looking at it!

<br />
	var init = function(){		<br />
		var img = document.getElementById('image');<br />
		var images = ['1.png', '2.png', '3.png', '4.png']; //names of all images in array<br />
		var delay = 120; //time between each image change<br />
		var arrayCounter = 0; //current image index<br />
		var cycleCounter = 0; //number of image changes completed<br />
		var minCycles = 20; //minimum number of times to change image before stopping<br />
		var random;<br />
<br />
		var cycleImages = function(){<br />
			arrayCounter++;<br />
			cycleCounter ++;<br />
			if(arrayCounter >= images.length){<br />
				arrayCounter = 0;<br />
			}<br />
			img.src = images[arrayCounter];<br />
			random = Math.floor(Math.random()*30);<br />
<br />
			if(random !== 1 || cycleCounter < minCycles){<br />
				setTimeout(cycleImages, delay);<br />
			}<br />
		}<br />
		<br />
		var button = document.getElementById('button');<br />
		button.onclick = cycleImages;<br />
	};	<br />
	


1.png


GO!

[CamelMan]

- Wow, thats great thank you so much. Its pretty much exactly what I had in mind! I was just starting to look into JavaScript as that seemed the best for the interactive side of things and you've cracked the core of it. Thank you for putting this together and if you wrote it from scratch just for me..

[spadam]

You're very welcome - Always nice to get a thank you! like I said, let me know if you need help customising it.