weee
06-04-2005, 12:22 PM
Thanks to vwphillips, Jona, Natdrip & felgall now I have this code here the allow me to nevigate between the DIV's.
What I'm trying to figure out is how can I make the DIV's to switch every X second on their own.
What do I need to use?
That's the code:
<html>
<head>
<style>
.tbody {display: none;}
</style>
<script Language="JavaScript">
var current = 1;
function move( byWhat )
{
current += byWhat;
if ( current < 1 ) current = 5;
if ( current > 5 ) current = 1;
show( current );
}
function show( nwhich )
{
current = nwhich;
for ( var dnum = 1; dnum <= 5; ++dnum )
{
var dv = document.getElementById("BODY"+dnum);
dv.style.display = ( dnum == nwhich ? 'block' : 'none' );
}
}
</script>
</head>
<body>
<DIV ID="BODY1" class="tbody" style="display: block;">
<b>DIV 1</b><br>
</DIV>
<DIV ID="BODY2" class="tbody">
<b>DIV 2</b><br>
</DIV>
<DIV ID="BODY3" class="tbody">
<b>DIV 3</b><br>
</DIV>
<DIV ID="BODY4" class="tbody">
<b>DIV 4</b><br>
</DIV>
<DIV ID="BODY5" class="tbody">
<b>DIV 5</b><br>
</DIV>
<a href="#" onClick="move(-1);">« Previous</a>
<a href="#" onClick="move(1);">Next »</a>
</body>
</html>
Thanks
What I'm trying to figure out is how can I make the DIV's to switch every X second on their own.
What do I need to use?
That's the code:
<html>
<head>
<style>
.tbody {display: none;}
</style>
<script Language="JavaScript">
var current = 1;
function move( byWhat )
{
current += byWhat;
if ( current < 1 ) current = 5;
if ( current > 5 ) current = 1;
show( current );
}
function show( nwhich )
{
current = nwhich;
for ( var dnum = 1; dnum <= 5; ++dnum )
{
var dv = document.getElementById("BODY"+dnum);
dv.style.display = ( dnum == nwhich ? 'block' : 'none' );
}
}
</script>
</head>
<body>
<DIV ID="BODY1" class="tbody" style="display: block;">
<b>DIV 1</b><br>
</DIV>
<DIV ID="BODY2" class="tbody">
<b>DIV 2</b><br>
</DIV>
<DIV ID="BODY3" class="tbody">
<b>DIV 3</b><br>
</DIV>
<DIV ID="BODY4" class="tbody">
<b>DIV 4</b><br>
</DIV>
<DIV ID="BODY5" class="tbody">
<b>DIV 5</b><br>
</DIV>
<a href="#" onClick="move(-1);">« Previous</a>
<a href="#" onClick="move(1);">Next »</a>
</body>
</html>
Thanks