Scroll Left

<script type="text/javascript">

var startpos=200 //
var stoppos=0 // left stop position
var Last=""
var previous="yourID_One"
var sliding=0
var L_Timer=""

function Init(layernum){
if(sliding==1){return} // prevent 2 layers sliding
if(previous==layernum){return} 
else{
slideLeft(layernum)
Sim_Return() // simultaneous slideback
}
}

function slideLeft(layernum){
sliding=1 // running
Last=previous // previous layernum
posnow=parseInt(document.getElementById(layernum).style.left) // current left position
if(posnow<stoppos+30){
posnow-=2;}
else{
if(stoppos<posnow){
posnow-=5;}
}
document.getElementById(layernum).style.left=posnow //new left position

L_Timer=setTimeout("slideLeft('"+layernum+"')",50);

if(posnow<=stoppos){
posnow==stoppos
sliding=0
clearTimeout(L_Timer);
previous=layernum //
}
}

startpos2=startpos
posnow2=stoppos
function Sim_Return(){
sliding=1
if(Last==0){
sliding=0
return}
if(document.getElementById(Last).style.left==startpos){return}
if(posnow2>=startpos2-30){
posnow2+=3}
else{
posnow2+=5;}
document.getElementById(Last).style.left=posnow2 // current right position
R_Timer=setTimeout("Sim_Return('"+Last+"')",50);

if(posnow2>=startpos2){
sliding=0
clearTimeout(R_Timer);
document.getElementById(Last).style.left=startpos2 // prevent overshoot
posnow2=stoppos
}
}

</script>

<a href="javascript:Init('yourID_One')">Slide Layer 1</a>
<a href="javascript:Init('yourID_Two')">Slide Layer 2</a>
<a href="javascript:Init('yourID_Three')">Slide Layer 3</a>
<a href="javascript:Init('yourID_Four')">Slide Layer 4</a>

<DIV style="position:absolute;left:100px;top:100px;width:200px;height:400px;clip:rect(0,100,400,0)">

<div id="yourID_One" style="position:absolute; left:0; top:0;z-index:2;width:100px">
Layer 1 Contents
</div> 

<div id="yourID_Two" style="position:absolute; left:200px; top:0px;z-index:2;width:100px">
Layer 2 Contents
</div> 

<div id="yourID_Three" style="position:absolute; left:200px; top:0px;z-index:2;width:100px">
Layer 3 Contents
</div> 

<div id="yourID_Four" style="position:absolute; left:200px; top:0px;z-index:2;width:100px">
Layer 4 Contents
</div> 

</DIV>

<script type="text/javascript">

var startpos=100 //
var stoppos=0 // slide stop position
var Last=""
var previous="yourID_One"
var sliding=0
var L_Timer=""

function Init(layernum){
if(sliding==1){return} // prevent 2 layers sliding
if(previous==layernum){return} 
else{
slideLeft(layernum)
}
}

function slideLeft(layernum){
sliding=1 // running
Last=previous // previous layernum
posnow=parseInt(document.getElementById(layernum).style.left) // current left position
if(posnow<stoppos+30){
posnow-=2;}
else{
if(stoppos<posnow){
posnow-=5;}
}
document.getElementById(Last).style.left=startpos
document.getElementById(layernum).style.left=posnow //new left position

L_Timer=setTimeout("slideLeft('"+layernum+"')",50);

if(posnow<=stoppos){
posnow==stoppos
sliding=0
clearTimeout(L_Timer);
previous=layernum //
}
}

</script>

<a href="javascript:Init('yourID_One')">Slide Layer 1</a>
<a href="javascript:Init('yourID_Two')">Slide Layer 2</a>
<a href="javascript:Init('yourID_Three')">Slide Layer 3</a>
<a href="javascript:Init('yourID_Four')">Slide Layer 4</a>

<DIV style="position:absolute; left:100px; top:100;width:200;height:400;clip:rect(0,100,400,0)">

<div id="yourID_One" style="position:absolute; left:0; top:0;z-index:2;width:100px">
Layer 1 Contents
</div> 

<div id="yourID_Two" style="position:absolute; left:100px; top:0;z-index:2;width:100">
Layer 2 Contents
</div> 

<div id="yourID_Three" style="position:absolute; left:100px; top:0;z-index:2;width:100">
Layer 3 Contents
</div>

<div id="yourID_Four" style="position:absolute; left:100px; top:0;z-index:2;width:100">
Layer 4 Contents
</div>

</DIV>