[Javascript] - 이미지 자동 슬라이드(Mouse Over Stop Mouse Down Play)
Javascript 2011. 7. 7. 13:25반응형
<HTML>
<HEAD>
<TITLE>이미지 자동 슬라이드</TITLE>
<script>
var step = -1, stime = 10, wtime = 1000, ep;
var sleep = stime, cell = 100, total = 4, width = cell * total;
function do_stop(){
clearTimeout(ep);
}
function do_move(){
var obj = photo_layer.style;
obj.pixelLeft = (obj.pixelLeft + step) % width;
if (obj.pixelLeft % cell == 0) sleep = wtime;
ep = setTimeout("do_move()",sleep);
sleep = stime;
}
</script>
</HEAD>
<BODY onload="do_move();">
<div style="top: 10px; left: 10px; height: 100px; width: 400px; position: absolute; overflow:hidden" onmouseout="do_move()" onmouseover="do_stop()">
<div id="photo_layer" style="top: 0px; left: -300px; width: 800px; height: 80px; position: absolute;">
<table height="80" cellspacing="0" cellpadding="0" id="table7" >
<tr align=center height=100 bgcolor="#cccccc">
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTUuanBn" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMy5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvNS5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvOS5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTUuanBn" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMy5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvNS5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvOS5qcGc=" width=98></td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE>이미지 자동 슬라이드</TITLE>
<script>
var step = -1, stime = 10, wtime = 1000, ep;
var sleep = stime, cell = 100, total = 4, width = cell * total;
function do_stop(){
clearTimeout(ep);
}
function do_move(){
var obj = photo_layer.style;
obj.pixelLeft = (obj.pixelLeft + step) % width;
if (obj.pixelLeft % cell == 0) sleep = wtime;
ep = setTimeout("do_move()",sleep);
sleep = stime;
}
</script>
</HEAD>
<BODY onload="do_move();">
<div style="top: 10px; left: 10px; height: 100px; width: 400px; position: absolute; overflow:hidden" onmouseout="do_move()" onmouseover="do_stop()">
<div id="photo_layer" style="top: 0px; left: -300px; width: 800px; height: 80px; position: absolute;">
<table height="80" cellspacing="0" cellpadding="0" id="table7" >
<tr align=center height=100 bgcolor="#cccccc">
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTUuanBn" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMy5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvNS5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvOS5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTUuanBn" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvMy5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvNS5qcGc=" width=98></td>
<td width=100><IMG src="http://cfs2.tistory.com/upload_control/download.blog?fhandle=YmxvZzU3NDk1QGZzMi50aXN0b3J5LmNvbTovYXR0YWNoLzAvOS5qcGc=" width=98></td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>
반응형
'Javascript' 카테고리의 다른 글
| [Javascript] - Onchange Target (_blank) (0) | 2011.07.07 |
|---|---|
| [Javascript] - 이미지 슬라이더(Prev, Next, Auto Play) (5) | 2011.07.07 |
| [Javascript] - 이미지 슬라이드(Fade In & Fade Out & Prev Next Button) (0) | 2011.07.07 |
| [Javascript] - Auto Td Row span (0) | 2011.07.07 |
| [Javascript] - Iframe Auto Resize (0) | 2011.07.01 |