Click the button to start the whole right shift, and move to the blue area all show up to stop.
<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><style type="Text/css">*{margin:0px; padding:0px;} #wai {width:0px; height:600px;}</style>"anniu1"Type="Image"Value="Start"Src="12nc43961z-15y04.png"style="width:40px; height:40px;position:absolute;left:190px; top:300px; margin-left:0px; Display:block"onclick="Right ()"/>--Button 1<input id="ANNIU2"Type="Image"Value="Start"Src="Kuaiwan.ico"style="width:40px; height:40px;position:absolute;right:190px; top:300px; margin-right:0px; Display:none"onclick="Left ()"/>--Button 2<div style="width:100%, height:600px, Overflow:hidden">--limit the size of the picture, beyond the partial hide<div style="width:3200px; height:600px;"> <div id="D1"style="width:1349px, height:600px, Background-color: #309; float:left; margin-left:-1149px;">--Blue Picture</div> <div id="D2"style="width:1349px, height:600px, Background-color: #F03; float:left;">--Red Picture</div> </div></div></body><script type="Text/javascript">function Right ()//Swipe Right{ if(parseint (D1.style.marginLeft) <=- $)//Blue picture left margin less than-200, always give red left 200px display { varA=parseint (D1.style.marginLeft) +5; D1.style.marginLeft=a+"px"; varAa=parseint (Anniu1.style.marginLeft) +5; Anniu1.style.marginLeft=aa+"px"; Window.settimeout ("Right ()",3);//every 3 milliseconds blue picture and button 1 margin each plus 5 pixels } Else//if (parseint (anniu1.style.marginLeft) >=949){Anniu1.style.display="None";//picture and Button 1 hide, Show button 2, button 1 margin zeroedanniu2.style.marginright="0px"; Anniu2.style.display="Block"; }}function Left ()//Swipe left{ if(parseint (D1.style.marginLeft) >-1149)//Picture and Button 2 add 5px swipe to the left every 3 milliseconds to stop sliding when the left margin is -1149px { varB=parseint (D1.style.marginLeft)-5; D1.style.marginLeft=b+"px"; varBb=parseint (anniu2.style.marginRight) +5; Anniu2.style.marginRight=bb+"px"; Window.settimeout ("Left ()",3); } Else//if (parseint (d1.style.marginLeft) <=-1149) sliding to the Head, Button 1 shows, button 2 hidden, button 2 left margin zeroed { //alert ("2");anniu2.style.display="None"; Anniu1.style.marginLeft="0px"; Anniu1.style.display="Block"; }}</script>javascript--Picture Slide effect