초보자를 위한 자바스크립트 이미지 슬라이더 소스코드
자바스크립트(javascript) 입문자를 위한 자바스크립트 이미지 슬라이더입니다. 오른쪽에서 왼쪽으로 이동하며, 회전됩니다. 응용하셔서 왼쪽으로 위로 아래로 이동하는 이미지 슬라이더를 직접 만들어 보세요. 본 소스는 초보자를 위해 최대한 간소화해서 코딩되었습니다.
<HTML>
<HEAD>
<TITLE>초간단 이미지 슬라이더 회전 : http://hompy.info</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>
웹프로그래머의 홈페이지정보 블로그 http://hompy.info
(0) 
(0)
자바스크립트(javascript) 입문자를 위한 자바스크립트 이미지 슬라이더입니다. 오른쪽에서 왼쪽으로 이동하며, 회전됩니다. 응용하셔서 왼쪽으로 위로 아래로 이동하는 이미지 슬라이더를 직접 만들어 보세요. 본 소스는 초보자를 위해 최대한 간소화해서 코딩되었습니다.
<HTML>
<HEAD>
<TITLE>초간단 이미지 슬라이더 회전 : http://hompy.info</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>
웹프로그래머의 홈페이지정보 블로그 http://hompy.info
(0) (0)
Copyright ⓒ
댓글을 달아 주세요
감사히 담아갑니다.