웹 브라우저 화면에 이미지가 돌아다닌다!!

스크립트만 소개하며, 순서는 다음과 같습니다.

 

1. 화면이 로드되면 init()함수를 호출합니다. 

2. init()함수에서는 getpicturecontent()함수를 호출하여 로드할 이미지를 정의합니다.

3. init()함수에서는 이미지가 위치할 최초의 좌표를 설정합니다.

4. init()함수에서는 마지막으로 scrollpicture()함수를 호출하여 이미지를 이동시킵니다.

5. scrollpicture()함수에서는 이미지를 정의된 픽셀값만큼 계속해서 이동시킵니다.

6. scrollpicture()함수에서는 마지막으로 이미지가 원하는 위치까지 이동하면 resetposition()함수를 호출하여 다시 원위치시킵니다.

 

   // 이동시 나타나는 이미지

   var picture=new Array();

   picture[0]="image/tv.gif";

   // 각각의 이미지의 링크

   var pictureurl=new Array();

   pictureurl[0]="#";

   // 링크의 Target 

   var picturetarget=new Array();

   picturetarget[0]="_blank";

   

   //이미지와 다음 이미지의 간격 (pixels)

   var distancepictopic=20;

   

   //이미지가 사라지는 시점 - 왼쪽기준 (pixels)

   var scrollerleft=0;

   

   // 효과가 나타나는 Y축의 값 (pixels)

   var scrollertop=300;

   

   // 이미지가 사라지지 않고 보여지는 간격 (pixels)

   var scrollerwidth=800;

   

   // 이미지를 사라지게 하는 배경이미지의 높이 - 보여지는 이미지의 사이즈와 동일하게 설정 (pixels)

   var scrollerheight=227;

   

   // 이미지 이동 속도 - 1단계 : 낮을수록 빨리 움직임

   var pause=50;

   

   // 이미지 이동 속도- 2단계 : 높을수록 빨리 움직임

   var step=2;

   

   var fadeimgwidth=60;

   var fadeimgleftcontent,fadeimgrightcontent;

   var clipleft,clipright,cliptop,clipbottom;

   var i_picture=0;

   var timer;

   var picturewidth;

   var picturecontent="";

   

   function init() {

    getpicturecontent();

    fadeimgleftcontent="";

    fadeimgrightcontent="";

   

       if (document.all) {

     picturediv.innerHTML = picturecontent;

     fadeimgleft.innerHTML=fadeimgleftcontent;

     fadeimgright.innerHTML=fadeimgrightcontent;

     picturewidth=picturediv.offsetWidth;

     document.all.picturediv.style.posTop=scrollertop;

           document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth;

     document.all.fadeimgleft.style.posTop=scrollertop;

           document.all.fadeimgleft.style.posLeft=scrollerleft;

     document.all.fadeimgright.style.posTop=scrollertop;

           document.all.fadeimgright.style.posLeft=scrollerleft+scrollerwidth-fadeimgwidth;

   

     clipleft=0;

     clipright=0;

     cliptop=0;

     clipbottom=scrollerheight;

     picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";

 

     scrollpicture();

       }

    if (document.layers) {

     document.picturediv.document.write(picturecontent);

     document.picturediv.document.close();

     document.fadeimgleft.document.write(fadeimgleftcontent);

     document.fadeimgleft.document.close();

     document.fadeimgright.document.write(fadeimgrightcontent);

     document.fadeimgright.document.close();

     picturewidth=document.picturediv.document.width;

     document.picturediv.top=scrollertop;

     document.picturediv.left=scrollerleft+scrollerwidth;

     document.fadeimgleft.top=scrollertop;

           document.fadeimgleft.left=scrollerleft;

     document.fadeimgright.top=scrollertop;

           document.fadeimgright.left=scrollerleft+scrollerwidth-fadeimgwidth;

     

     document.picturediv.clip.left=0;

     document.picturediv.clip.right=0;

     document.picturediv.clip.top=0;

     document.picturediv.clip.bottom=scrollerheight;

   

           scrollpicture();

       }

   }

   

   function scrollpicture() {

    if (document.all) {

     if (document.all.picturediv.style.posLeft>=scrollerleft-picturewidth) {

      document.all.picturediv.style.posLeft-=step;

      clipright+=step;

      if (clipright>scrollerwidth) {

       clipleft+=step;

      }

      document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";

      

      var timer=setTimeout("scrollpicture()",pause);

     }

     else {

      resetposition();

     }

    }

    if (document.layers) {

     if (document.picturediv.left>=scrollerleft-picturewidth) {

      document.picturediv.left-=step;

      document.picturediv.clip.right+=step;

      if (document.picturediv.clip.right>scrollerwidth) {

       document.picturediv.clip.left+=step;

      }

      var timer=setTimeout("scrollpicture()",pause);

     }

     else {

      resetposition();

     }

    }

   }

   

   function resetposition() {

    if (document.all) {

           document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth;

     clipleft=0;

     clipright=0;

     document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";

           scrollpicture();

    }

    if (document.layers) {

     document.picturediv.left=scrollerleft+scrollerwidth;

     document.picturediv.clip.left=0;

     document.picturediv.clip.right=0;

           scrollpicture();

    }

   }

   

   function getpicturecontent() {

    picturecontent="<span style='position:relative'>";

    for (i=0;i<=picture.length-1;i++) {

     picturecontent+="<a href="+pictureurl[i]+" target="+picturetarget[i]+">";

     picturecontent+="<img src='"+picture[i]+"' border=0 hspace="+distancepictopic+" ></a>";

    }

    picturecontent+="</span>";

   }