회원등록 비번분실

작성자 관리자
작성일 2005-11-29 (화) 18:57
ㆍ추천: 0  ㆍ조회: 5066      
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>

<!-- Scroll(숫자); 첫부분 그림위치 0 부터 시작

증가는 이미지 파일에 가로 넓이를 더해서 증가 시키면 됩니다.

현재 onmouseover= 속성은 마우스가 링크에 갔을 때 실행되는 옵셥입니다.

클릭 했을 때 이미지가 보이게 하려면 onmouseover 대신 onclick 이벤트를  

사용하면 됩니다.

-->

<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>

  0
3500