News Rotator

**GarrettB** · Sep 16, 2006, 09:36

Hello,
I have a little div switcher:
http://www.xhtmlthis.com/clients/js_divswitcher/

And im stuck on how to make it pause and play with it still bieng in the 123 order.

And just to even get it to stop im having trouble.

Please help.

**deathshadow** · Sep 16, 2006, 10:57

Try this on for size:

Code:

<html><head>
<script type="text/javascript">
var content=new Array('11111111','22222222','33333333');
var direction=1;
var current=content.length; 

function update() {
	document.getElementById('divHTML').innerHTML=content[current];
}

function loop_em() {
	if (direction!==0) {
		current=(current+direction)%content.length;
		while (current<0) { current+=content.length; }
	}
	update();
	loop_timer=setTimeout("loop_em();",1000);
}

function start() {
	direction=1;
	document.getElementById('startstop').innerHTML='<a href="#" onclick="stop();">Stop</a>';
	loop_em();
	return true;
}

function reverse() {
	direction=-1;
	document.getElementById('startstop').innerHTML='<a href="#" onclick="stop();">Stop</a>';
	loop_em();
	return true;
}

function stop() {
	direction=0;
	document.getElementById('startstop').innerHTML='<a href="#" onclick="start();">Start</a>';
	clearTimeout(loop_timer);
	return true;
}

function previous() {
	stop();
	current--;
	while (current<0) { current+=content.length; }
	update();
	return true;
}

function next() {
	stop();
	current=(current+1)%content.length;
	update();
	return true;
}

window.onload=loop_em;
</script>

</head><body>
	<div id="divHTML"></div>
	<div id="divSettings">
		<span id="previous"><a href="#" onclick="previous();">&lt; Previous</a></span> |
		<span id="startstop"><a href="#" onclick="stop();">Stop</a></span> |
		<span id="next"><a href="#" onclick="next();">Next &gt;</a></span>
	</div>

</body></html>

A bit rough around the edges, but methinks that does what you are asking for. You'll notice I tossed in 'reverse' functionality as well, though it's not implemented in the html part. Just call that as you would start.

Putting your 'values' in an array also means you don't have to write a new function as you add/remove entries. I'm assuming this is for a news switcher or image swap of some sort - being able to have as many or as few as you like by simply changing the array is more desirable, ja?