--------------------ㅓ

표시되는 이미지  :

--------------------ㅓ

1 2  3  4  5  6

1번 버튼 누르면 1번 이미지가 나오고 2번 누름 2번 이미지가 나옴

버튼을 누르지 않을시에는 1번부터~6번까지 이미지가 돌아가면서 뿌려준다

----------------------------------------------------------------------------------------------------

setInterval Method

iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])

clearInterval Method

window.clearInterval(iIntervalID)

iIntervalID Required. Integer that specifies the interval to cancel. This value must have been previously returned by the setInterval method.

위에 이 두함수만 알면 됨

----------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style3 {font-size: 18px; font-weight: bold; font-family: Verdana; }
-->
</style>
<script>
function showImg(img){
//changeImage 이미지 아이디
myimage=document.getElementById("changeImage")
myLink = document.getElementById("goUrl")
  if(img==0){
   myimage.src="0.jpg"
   myLink.href="http://www.naver.com";

  }else if(img==1){
   myimage.src="1.jpg"
   myLink.href="http://www.naver.com";
  }else if(img==2){
   myimage.src="2.jpg"
   myLink.href="http://www.naver.com";
  }else if(img==3){
   myimage.src="3.jpg"
   myLink.href="http://www.naver.com";
  }else if(img==4){
   myimage.src="4.jpg"
   myLink.href="http://www.naver.com";
  }else{
   myimage.src="5.jpg"
   myLink.href="http://www.naver.com";
  }
}
function stopReload(){
  window.clearInterval(timer)

}
var imageNumber=0;
var timer;
function startReload(){
timer=window.setInterval("refrashImage()", 3000);
//setTimeout("refrashImage()",1000);
}
function refrashImage(){
  if(imageNumber >6 ){
  imageNumber=0;
  }else{
   showImg(imageNumber)
   imageNumber = eval(imageNumber) + 1
  }
}
</script>
</head>

<body onload="startReload()">
<table width="49%" height="178" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td height="138" colspan="6"><a  id="goUrl" href="http://www.naver.com"><img src="1.jpg" name="changeImage" width="470" height="300" id="changeImage" onmouseover="stopReload();" onmouseout="startReload();" /></a></td>
  </tr>
  <tr>
    <td height="38"><div align="center" class="style3"><a href="http://www.daum.net"><img src="mb_no1_over.gif" width="24" height="12" border="0" onmouseover="showImg(0);stopReload();" onmouseout="startReload();" /></a></div></td>
    <td><div align="center" class="style3" ><a href="http://www.yahoo.co.kr"><img src="mb_no2_over.gif" width="24" height="12" border="0" onmouseover="showImg(1);stopReload();" onmouseout="startReload();" / ></a></div></td>
    <td><div align="center" class="style3" ><a href="http://www.yahoo.co.kr"><img src="mb_no3_over.gif" width="24" height="12" border="0" onmouseover="showImg(2);stopReload();" onmouseout="startReload();" /></a></div></td>
    <td><div align="center" class="style3" ><a href="http://www.yahoo.co.kr"><img src="mb_no4_over.gif" width="24" height="12" border="0" onmouseover="showImg(3);stopReload();" onmouseout="startReload();" /></a></div></td>
    <td><div align="center" class="style3" ><a href="http://www.yahoo.co.kr"><img src="mb_no5_over.gif" width="24" height="12" border="0" onmouseover="showImg(4);stopReload();" onmouseout="startReload();" /></a></div></td>
    <td><div align="center" class="style3" ><a href="http://www.yahoo.co.kr"><img src="mb_no6_over.gif" width="24" height="12" border="0" onmouseover="showImg(5);stopReload();" onmouseout="startReload();" /></a></div></td>
  </tr>
</table>
</body>
</html>

+ Recent posts