이미지가 움직이다가 멈추고 다시 움직입니다.

인터넷에 공개된 소스들은 많이 복잡하고 길더군요.. 그래서 줄여봤습니다..

<!-- 이미지 출력부분 -->
<div style="position:relative;width:162;height:132;border:1px solid #000000;" >
<div style="position:absolute;width:160;height:130;left:0;top:0;clip:rect(0 160 130 0)" onmouseover="poto_stop()" onmouseout="poto_move()">
<div id="poto" style="position:absolute;width:800;height:130;left:0;top:0;">

160 X 130 사이즈 이미지 5개

<div>
</div>
</div>

<script>

// 좌우로 왔다갔다 해주게 하는 변수
i=-1;

// 처음 정지시간 5초
delay=5000;

// 움직이는 함수를 실행
poto_move();

// 움직임 함수
function poto_move(){  

// 좌측 또는 우측으로 1픽셀씩 이동시킴
poto.style.pixelLeft += i;

// 맨 좌즉 또는 우측에 도달했을 때 반대 방향으로 전환시킴
if(poto.style.pixelLeft == -640 || poto.style.pixelLeft == 0) i *= -1;

// 만약 사진 한장 사이즈가 되면 5초동안 멈춘다. 사진을 보여주기 위해
if(!(poto.style.pixelLeft % 160)) delay=5000;

// 정해진 시간마다 poto_move() 함수를 자동 실행한다.
t1=setTimeout("poto_move()",delay);

// 기본적으로 이동되는 시간을 50/1000으로 한다. 이미지가 스르르 움직인다.
delay=50;
}

function poto_stop(){  

// 자동 실행 함수를 멈춥니다.
clearTimeout(t1);

}

</script>