gistfile1.js

<script type='text/javascript'>

var default_speed = 100; //ms
var current_frame = 0;
var frames = []
var stepper;

function getImages(){
	var img_urls = []
	var images = document.images
	var img;
	for(var i in images){
		if(images[i].src && images[i].src.match(/-[\d]+\.png$/g))
		  img_urls.push(images[i].src)
	}
	return img_urls
}

function replaceImage(pause){
	document.getElementById("viewer").getElementsByTagName("img")[0].src = frames[current_frame]
	current_frame++
	if(current_frame >= frames.length)
	  current_frame = 0
	clearTimeout(stepper)
	if(!pause)
	  stepper = setTimeout("replaceImage()",document.getElementById("speed").value)
}

function createViewer(element){
	frames = getImages()
	var viewer      = document.createElement("div")
	var nextFrame   = document.createElement('img')
	var controls = document.createElement("div")
	var start = document.createElement("input")
	var stop = document.createElement("input")
	var next = document.createElement("input")
	var speed = document.createElement("input")
	var speed = document.createElement("input")
	controls.id = "controls"
	start.type = "button"
	stop.type = "button"
	next.type = "button"
	start.value = "⇛"
	stop.value  = "||"
	next.value  = ">"
	speed.type = "text"
	speed.name = "speed"
	speed.id   = "speed"
	speed.value = default_speed;
	stop.onclick = function(){clearTimeout(stepper) }
	start.onclick = function(){replaceImage() }
	next.onclick = function(){ replaceImage(true) }
	viewer.appendChild(nextFrame)
	controls.appendChild(start)
	controls.appendChild(stop)
	controls.appendChild(next)
	controls.appendChild(speed)
	viewer.appendChild(controls)
	viewer.id = "viewer"
	element = element || document.body
	document.body.insertBefore(viewer,document.body.firstChild);
	replaceImage()
}

window.onload = function(){
	createViewer(document.getElementById("menu"))
}

</script>