본문 바로가기
Web Program/Html Lecture

이미지 슬라이드

by 현이빈이 2008. 9. 4.
반응형

<HTML>
<HEAD>
<TITLE>초간단 이미지 슬라이더 회전 </TITLE>
<script>
var step = -1, stime = 10, wtime = 1000, ep;
var sleep = stime, cell = 100, total = 3, 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 == 1) sleep = wtime;
ep = setTimeout("do_move()",sleep);
sleep = stime;
}
</script>
</HEAD>
<BODY onload="do_move();">
<div style="width:78; height:78px; position:absolute; left:10px; top:0px; z-index:1; overflow:hidden" onmouseout="do_move()" onmouseover="do_stop()">
<div id="photo_layer" style="width:289px; height:78px; position:absolute; left:1px; top:0px; z-index:1;">
<table height="78" cellspacing="0" cellpadding="0" id="table7">
<tr valign="top" height=78 bgcolor="#cccccc">

<td width=98 height="78"><a href="#"><IMG src="http://eventteam.co.kr/img/main/photo_01.gif" border="0"></a></td>
<td width=98 height="78"><a href="#"><IMG src="http://eventteam.co.kr/img/main/photo_02.gif" border="0"></a></td>
<td width=98 height="78"><a href="#"><IMG src="http://eventteam.co.kr/img/main/photo_03.gif" border="0"></a></td>
<td width=98 height="78"><a href="#"><IMG src="http://eventteam.co.kr/img/main/photo_01.gif" border="0"></a></td>
<td width=98 height="78"><a href="#"><IMG src="http://eventteam.co.kr/img/main/photo_02.gif" border="0"></a></td>
<td width=98 height="78"><a href="#"><IMG src="http://eventteam.co.kr/img/main/photo_03.gif" border="0"></a></td>

</tr>
</table>
</div>
</div>
</BODY>
</HTML>

반응형