일정시간동안 이미지 자동으로 변경하기 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

일정시간동안 이미지 자동으로 변경하기 정보

JavaScript 일정시간동안 이미지 자동으로 변경하기

본문

<script language="JavaScript" type="text/javascript">
<!--
 // 이미지 경로
 var imgLeft = new Array() ;
 var imgRight = new Array() ;
 imgLeft[0] = new Image() ;
 imgLeft[0].src = "./img/ex_a1.gif" ;
 imgLeft[1] = new Image() ;
 imgLeft[1].src = "./img/ex_a2.gif" ;
 imgLeft[2] = new Image() ;
 imgLeft[2].src = "./img/ex_a3.gif" ;
 imgRight[0] = new Image() ;
 imgRight[0].src = "./img/ex_b1.gif" ;
 imgRight[1] = new Image() ;
 imgRight[1].src = "./img/ex_b2.gif" ;
 imgRight[2] = new Image() ;
 imgRight[2].src = "./img/ex_b3.gif" ;

 // 이미지 링크
 var urlLeft = new Array() ;
 var urlRight = new Array() ;
 urlLeft[0] = "#" ;
 urlLeft[1] = "#" ;
 urlLeft[2] = "#" ;
 urlRight[0] = "1" ;
 urlRight[1] = "2" ;
 urlRight[2] = "3" ;

 var productAll = "" ;
 productAll += "<table width='400' cellpadding='0' cellspacing='0' border='1'>" ;
 productAll += "<tr><td width='200' height='150' align='center'>" ;
 productAll += "<a href='" + urlLeft[0] + "'><img src='" + imgLeft[0].src + "' border='0'></a>" ;
 productAll += "</td><td width='200' height='150' align='center'>" ;
 productAll += "<a href='" + urlRight[0] + "'><img src='" + imgRight[0].src + "' border='0'></a>" ;
 productAll += "</td></tr>" ;
 productAll += "<tr><td width='200' height='150' align='center'>" ;
 productAll += "<a href='" + urlLeft[1] + "'><img src='" + imgLeft[1].src + "' border='0'></a>" ;
 productAll += "</td><td width='200' height='150' align='center'>" ;
 productAll += "<a href='" + urlRight[1] + "'><img src='" + imgRight[1].src + "' border='0'></a>" ;
 productAll += "</td></tr>" ;
 productAll += "<tr><td width='200' height='150' align='center'>" ;
 productAll += "<a href='" + urlLeft[2] + "'><img src='" + imgLeft[2].src + "' border='0'></a>" ;
 productAll += "</td><td width='200' height='150' align='center'>" ;
 productAll += "<a href='" + urlRight[2] + "'><img src='" + imgRight[2].src + "' border='0'></a>" ;
 productAll += "</td></tr></table>" ;
 
 var time = 1500 ;
 var counter = 1 ;

 function imgShowInit() {
  productContent = "<div style='left:0px ; width:100% ; position:absolute ; top:0px  ; height:450px ;' id='showProduct'>" ;
  productContent += productAll ;
  productContent += "</div>" ;

  document.write(productContent) ;
  window.setTimeout("imgShow()", time) ;
 }

 function imgShow() {
  if(counter == 3)
  counter = 0 ;

  tmp = document.getElementById("showProduct").style ;
  tmp.top = -150 * counter ;
  counter++ ;

  window.setTimeout("imgShow()", time) ;
 }
// -->
</script>

 

 

<table width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td align="center">
  <div style="theight:150px ; width:400px ; position:absolute; overflow:hidden; visibility: visible ; border:1px solid #000000 ;" id="productPos">
    <script>imgShowInit();</script>
  </div>
  </td>
 </tr>
</table><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
추천
0
  • 복사

댓글 0개

© SIRSOFT
현재 페이지 제일 처음으로