php2008. 10. 31. 17:18

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>

<HTML>

<head>
 <script>
  var step = 100;
  var cell = 100, total = 4, width = cell * total;
  var imageCount = 8;

  function do_left(){
    var obj = document.getElementById("photo_layer").style;
   
    var obj_left = obj.left;
    var obj_left_without_px = obj_left.substring(0,obj_left.lastIndexOf("px"));
    if (obj_left_without_px < 0)
   {
      var obj_left_calculate = (Number(obj_left_without_px)+step)+"px";   
      obj.left= obj_left_calculate;
     
   }   
  }

  function do_right(){
    var obj = document.getElementById("photo_layer").style;
   
    var obj_left = obj.left;
    var obj_left_without_px = obj_left.substring(0,obj_left.lastIndexOf("px"));
   
   if (obj_left_without_px > (imageCount*cell*(-1)+width))
   {
      var obj_left_calculate = (Number(obj_left_without_px)-step)+"px";   
         obj.left= obj_left_calculate;
   }
  
  }
 </script>
</head>
<body>
<table border="1">
 <tr align="center" style="height: 100px" bgcolor="#ffffff">
  <td><img src="./image/01.jpg" style = "width: 98px; height: 100px" onclick="do_left()"></img></td>
  <td>
    <div style="top: 0px; left: 0px; height: 100px; width: 400px; overflow:hidden; position: relative" >
    <div id="photo_layer" style="top: 0px; left: 0px; width: 800px; height: 80px; position: relative">
     <table style="height: 100px" cellspacing="0"  cellpadding="0">
      <tr align="center" bgcolor="#cccccc">
       <td width='100'><IMG src="./image/01.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/02.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/03.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/04.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/05.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/06.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/07.jpg" width='98'></img></td>
       <td width='100'><IMG src="./image/08.jpg" width='98'></img></td>
      </tr>
     </table>
    </div>
   </div>
  </td>
  <td><img src="./image/01.jpg" width="98" height="100" onclick="do_right()"></img></td>
 </tr>
</table>
</body>
</HTML>

Posted by 동동(이재동)