vertical slide show javascript, moving divs vertical

This slide show is made by custom script, not jquery.

This is the lost slide next movbe to the first slide

0

0 



<script language="javascript" type="text/javascript">
var delay= 3000;
var speed=25;
var nos=6;
var boxht= 250;

var sli_box1 = document.getElementById("box1"); 
var sli_box2 = document.getElementById("box2"); 

var slideid="";
 for(var u=1;u < nos; u++)
{
var slideid = document.getElementById(slideid); 
}

sli_box1.innerHTML=slide2.innerHTML;
sli_box2.innerHTML=slide1.innerHTML;
var err0 = document.getElementById("err0");
var err1 = document.getElementById("err1");
var counter = document.getElementById("counter");
var pause = document.getElementById("pause");
window.onload=function()
{
setTimeout(slidem, delay);	
}

function slidem()
{  

if (parseInt(sli_box1.style.top)<0 || parseInt(sli_box2.style.top)<-boxht)
{ 


sli_box2.style.top = parseInt(sli_box2.style.top) +speed; 
sli_box1.style.top = parseInt(sli_box1.style.top) +speed; 
setTimeout(slidem, 1); 

err0.innerHTML=parseInt(sli_box1.style.top);
err1.innerHTML= parseInt(sli_box2.style.top);

if( err0.innerHTML== 0 )
{  
var c = parseInt(counter.innerHTML); 
counter.innerHTML=c+1;
setTimeout(slide1, delay); 
}

if( err1.innerHTML== -boxht)
{  
var c = parseInt(counter.innerHTML); 
counter.innerHTML=c+1;
setTimeout(slide2, delay); 
}

}

function slide1()
{
var c = parseInt(counter.innerHTML);
if(c>nos-1)
{ counter.innerHTML=0;cow=1; }
else
{ cow=c+1; }
(sli_box2.style.top)= -2*boxht+"px";
sli_box2.innerHTML=document.getElementById("slide"+cow).innerHTML;
err1.innerHTML= parseInt(sli_box2.style.top);
slidem(); 
}

function slide2()
{
var c = parseInt(counter.innerHTML);
if(c>nos-1)
{ counter.innerHTML=0;cow=1; }
else
{ cow=c+1; }
sli_box1.style.top= -boxht+"px";
sli_box1.innerHTML=document.getElementById("slide"+cow).innerHTML;
err0.innerHTML= parseInt(sli_box1.style.top);
slidem(); 
}
}

function goslide(t)
{
counter.innerHTML=t-1;
clearTimeout(slide1); 
clearTimeout(slide2); 
}

function stpplay()
{
if(pause.innerHTML=="Pause")
{ 
pause.innerHTML="Play";
}

else
{
pause.innerHTML=="Pause";
}


}
</script>

This comes in the body
=========================

<head>

<style type="text/css">

body { margin: 0px;padding: 0px; }

#box
{ width: 600px; height: 250px;overflow:hidden;float: left; 
background-color: #cc00ff;padding:0px;}

#count
{ width: 600px; height: 20px; background-color: #cccccc; float:left;}

#count a
{ text-decoration:none;  float: left; margin:2px; background-color: #ffffff;
padding-left: 3px;overflow: hidden;padding-right: 2px; }

#box1
{ width: 600px; height:250px;  float: left;padding: 0px;margin:0px; }

#box2
{ width: 600px; height: 250px; float: left;margin:0px;padding: 0px; }

#slide1, #slide2 ,#slide3,#slide4,#slide5,#slide6, #pos
{ display:none; }


</style>


</head>

<body>

<div id="box">
<div id="box1" style="position:relative; top:-250px;"></div>
<div id="box2" style="position:relative; top:-250px;"></div>
</div>
<div id="count"> <a href="#" onClick="goslide(1);"> 1</a>
 <a href="#" onClick="goslide(2);"> 2</a>
 <a href="#" onClick="goslide(3);"> 3</a>
 <a href="#" onClick="goslide(4);"> 4</a>
 <a href="#" onClick="goslide(5);"> 5</a>
 <a href="#" onClick="goslide(6);"> 6</a>
<span id="counter">1 </span>
<span id="total"> /6 </span>
</div>
<div id="slide1"><img src="resume.jpg"> </div>
<div id="slide2"><img src="web.jpg"> </div>
<div id="slide3"><img src="jag.jpg"> </div>
<div id="slide4"><h1>This slide show  is made by custom script, not jquery.</h1> </div>
<div id="slide5"><img src="contact.jpg"></div>
<div id="slide6"><h1>This is the lost slide next movbe to the first slide</h1> </div>


<div id="pos">
<span id="err0">0 </span> <p>
<span id="err1">0 </span><p>
</div>
</body>


<script  src="slide.js" type="text/javascript"> </script>
====================
Download source as ZIP
About the Code :
HTML part : We use a div keeping ovderflow: hidden; We place 2 divs inside keeping position relative.When we keep top:-250px; for both divs one stays on stage and another ontop of the div.Slide1, slide2, too sliden acts like data providers for BOX1 and BOX2 divs. Hide them using display none style.

Javascript: This is custom javascript. For verticle sliding you just have to change the DIV height in delay, speed,nos(number of slides) and div height (boxht).At start function slidem is it set to delay and box1 and box2 gets the innerHTML from slide1 and slide2. after time delay depending on the style.top they both move down. we are at the slide2, and the fucntion is set to slide1 or slide2 on delay.After delay the bottom box moves to top and gets the innerHTMl from next slide.We do this by counting the slide no. We can navigate to any slide by clicking a link by changing the number of slide in counter. If you want slide3 the counter becomes 2 and brings the slide3.