ㆍ작성자	관리자
ㆍ작성일	2005-11-29 (화) 18:57

ㆍ추천: 0 ㆍ조회: 5799

ㆍIP:

아이프레임을 이용한 이미지 스크롤 하기
아이프레임( IFRAME)을 이용한 이미지 스크롤 하기
2개 파일로 구성 되어있습니다.
하나는 메인스크립트가 들어가는 파일이고
또 하나는 이미지파일이 있는 웹문서입니다.

첨부파일을 다운 받으신후 여러분에 취향에 맞게 수정하시면 되구요.
첨부파일에 이미지는 포함되어 있지 않습니다.

테스트는 위에 예제 미리보기를 클릭하시면 됩니다.

====================================
첫번째 파일 - iframe-slide-img.htm

<html>
<head>
<title>첫번째 파일 - iframe-slide-img.htm </title>
<style>
td {font-size:12px; font-family:굴림; text-decoration:none; }
font {font-size:12px; font-family:굴림; text-decoration:none; line-height:130%;}
A:link,A:active,A:visited{text-decoration:none;FONT-SIZE:12PX;color:'#333333';}
A:hover {text-decoration:none; color:'ff9900'}
font { font-size: 9pt; }
</style>

<script language="JavaScript">
window.oneclick= null
var x = 0;
var nScrollEnd = 0;
var nStop = 0;
function Scroll(dist)
{
nStop =0;
nScrollEnd = dist;
if(x<dist) scroll_Right();
if(x>dist) scroll_Left();
}

function scroll_Left()
{

if(nStop == 0)
{

if (x > nScrollEnd)
{

this.frames.scroll_menu.scroll(x,0);
x = x - 115; //오른쪽에서 왼쪽으로 이동하는 속도 - 속도 숫자가 클수록 빨라집니다.
// 참고로 this.frames.scroll_menu.scroll 의 scroll_menu 와 iframe의 name=scroll_menu 동일해야 합니다.

setTimeout('scroll_Left()', 1);
}

else
{

x = nScrollEnd;

this.frames.scroll_menu.scroll(x,0);

}

}

}

function scroll_Right()

{

if(nStop == 0)

{

if (x < nScrollEnd)

{

this.frames.scroll_menu.scroll(x,0);

x = x + 115; //왼쪽에서 오른쪽으로 이동하는 - 속도 숫자가 클수록 빨라집니다.

setTimeout('scroll_Right()', 10);

}

else

{

x = nScrollEnd;

this.frames.scroll_menu.scroll(x,0);

}

}

}

//-->

</script>

<body>



<table border="0" cellpadding="5" cellspacing="0">

<tr>

<td><IFRAME name="scroll_menu" marginWidth=0 marginHeight=0 src="iframe-view.html" frameBorder=0 width=126 scrolling=no height=93></IFRAME>

<br>

</td>

<td bgcolor="#FFCCFF">

<p> 마우스가 링크위에 있을 때 실행됨<br>
<br><a href="#" onmouseover=Scroll(0);>그림1</a><br><a href="#" onmouseover=Scroll(126);>그림2</a><br><a href="#" onmouseover=Scroll(252);>그림3</a><br><a href="#" onmouseover=Scroll(378);>그림4</a><br><a href="#" onmouseover=Scroll(504);>그림5</a><br><a href="#" onmouseover=Scroll(630);>그림6</a>
</p>
</td>
<td bgcolor="#FFFF99">
<p> 마우스가 클릭했을 때 실행됨<br>
<br><A href="#" onclick=Scroll(0);>그림1</A><br><a href="#" onclick=Scroll(126);>그림2</a><br><a href="#" onclick=Scroll(252);>그림3</a><br><a href="#" onclick=Scroll(378);>그림4</a><br><a href="#" onclick=Scroll(504);>그림5</a><br><a href="#" onclick=Scroll(630);>그림6</a>

</p>

</td>

</tr>

</table>

<p>

<br>

<br><br><br>

</p>

</body>

</html>

==================================================================
두번째 파일 - 이미지가 있는 파일 - iframe-view.html(iframe에 들어가는 파일)

<html>
<head>
<title>두번째 파일 - 이미지가 있는 파일 - iframe-view.html(iframe에 들어가는 파일) </title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">



<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="car01.jpg" width="126" height="93" border="0"></td>
<td><img src="car02.jpg" width="126" height="93" border="0"></td>
<td><img src="car03.jpg" width="126" height="93" border="0"></td>
<td><img src="car04.jpg" width="126" height="93" border="0"></td>
<td><img src="car05.jpg" width="126" height="93" border="0"></td>
<td><img src="car06.jpg" width="126" height="93" border="0"></td>
</tr></table>
</body>