웹&컴퓨팅

배너/이미지 슬라이딩 자바스크립트

x2chi 2007. 11. 7. 10:36
반응형

         <script language='JavaScript'>

          var slide_width="300"  // 슬라이드 가로 크기
          var slide_height="140" // 슬라이드 세로 크기
          var slide_speed=2   // 이동 속도 (거리)
          var setInt_time=40  // 변환 속도 (시간)
          var slide_bgcolor=""  // 슬라이드 배경색

          var slide_copy_speed=slide_speed
          var slide_content=new Array()

          // 출력 내용 시작

          slide_content["0"]="<table cellpadding='0' cellspacing='0' width='301'><tr height='140'><td background='<?=$Top_Folder?>images/hit_bg.jpg' style='padding-top:30px;padding-left:5px;'><img src='<?=$Top_Folder?>images/hit_1.gif' border='0' align='absmiddle'></td></tr></table>";

          slide_content["1"]="<table cellpadding='0' cellspacing='0' width='301'><tr height='140'><td background='<?=$Top_Folder?>images/hit_bg.jpg' style='padding-top:30px;padding-left:5px;'><img src='<?=$Top_Folder?>images/hit_2.gif' border='0' align='absmiddle'></td></tr></table>";

          slide_content["2"]="<table cellpadding='0' cellspacing='0' width='301'><tr height='140'><td background='<?=$Top_Folder?>images/hit_bg.jpg' style='padding-top:30px;padding-left:5px;'><img src='<?=$Top_Folder?>images/hit_3.gif' border='0' align='absmiddle'></td></tr></table>";

          slide_content["3"]="<table cellpadding='0' cellspacing='0' width='301'><tr height='140'><td background='<?=$Top_Folder?>images/hit_bg.jpg' style='padding-top:30px;padding-left:5px;'><img src='<?=$Top_Folder?>images/hit_4.gif' border='0' align='absmiddle'></td></tr></table>";

          //출력 내용 끝

          slide_content='<nobr>'+slide_content.join(" ")+'</nobr>'

          document.write('<span id="temp" style="visibility:hidden;position:absolute;top:0px;left:0px">'+slide_content+'</span>')


          var actual_width=''
          var actual_height=''

          var slide_dvi1, slide_dvi2, hns_slide1, hns_slide2

          function scroll_slide(){
           slide_dvi1=document.getElementById ? document.getElementById("slide_dvi_1") : document.all.slide_dvi_1
           slide_dvi2=document.getElementById ? document.getElementById("slide_dvi_2") : document.all.slide_dvi_2
           slide_dvi1.innerHTML=slide_dvi2.innerHTML=slide_content
           actual_width=document.all? slide_dvi1.offsetWidth : document.getElementById("temp").offsetWidth
           actual_height=document.all? slide_dvi1.offsetHeight : document.getElementById("temp").offsetHeight
           slide_dvi2.style.left=actual_width
           slide_dvi2.style.top=actual_height

           slide_time=setInterval("slide_up()",setInt_time)
           // Type Up Scroll : slide_up()
           // Type Left Scroll : slide_left()
          }

          function slide_up(){
           slide_dvi2.style.left=0

           if ( parseInt(slide_dvi1.style.top)>(actual_height*(-1)+5) ) slide_dvi1.style.top=parseInt(slide_dvi1.style.top)-slide_copy_speed
           else slide_dvi1.style.top=parseInt(slide_dvi2.style.top)+actual_height-5

           if ( parseInt(slide_dvi2.style.top)>(actual_height*(-1)+5) ) slide_dvi2.style.top=parseInt(slide_dvi2.style.top)-slide_copy_speed
           else slide_dvi2.style.top=parseInt(slide_dvi1.style.top)+actual_height
          }

          function slide_left(){
           slide_dvi2.style.top=0

           if ( parseInt(slide_dvi1.style.left)>(actual_width*(-1)+5) ) slide_dvi1.style.left=parseInt(slide_dvi1.style.left)-slide_copy_speed
           else slide_dvi1.style.left=parseInt(slide_dvi2.style.left)+actual_width-5

           if ( parseInt(slide_dvi2.style.left)>(actual_width*(-1)+5) ) slide_dvi2.style.left=parseInt(slide_dvi2.style.left)-slide_copy_speed
           else slide_dvi2.style.left=parseInt(slide_dvi1.style.left)+actual_width
          }


          //출력 시작
          with (document){

            write('<table border="0" cellspacing="0" cellpadding="0"><td valign="center">')
            write('<div style="position:relative;width:'+slide_width+';height:'+slide_height+';overflow:hidden">')
            write('<div style="position:absolute;width:'+slide_width+';height:'+slide_height+';background-color:'+slide_bgcolor+'" onMouseover="slide_copy_speed=0" onMouseout="slide_copy_speed=slide_speed">')
            write('<div id="slide_dvi_1" style="position:absolute;left:0px;top:0px"></div>')
            write('<div id="slide_dvi_2" style="position:absolute;left:0px;top:0px"></div>')
            write('</div></div>')
            write('</td></table>')
          }
          //출력 끝

          window.onload=scroll_slide
         </script>



바로 출력위치에 사용하시면됩니다.
Type Up Scroll : slide_up() -> 위로
Type Left Scroll : slide_left() -> 왼쪽으로
2가지 타입의 스크롤...
어설프게 만들어 봤는데...
다른브라우져 테스트는 안됬구요 IE에서..
혹시 고수님 보시면 충고부탁합니다.
- x2chi.com -

반응형