끊김없이 흐르는 배너(2009. 10. 12)

흐르는 배너, 움직이는 배너, 이동하는 배너, 배너 롤링....
다 같은 말이지만.. 검색하실 떄 어떤 말을 쓰시나요?ㅋㅋ

단순하게 옆으로 흐르는 배너, 위로 올라가는 배너와
버튼으로 다음배너, 이전배너, 움직임 정지, 움직임 시작으로 제어할 수 있는 흐르는 배너..
소스들 입니다.

옆으로 흐르는 배너

위 플래시 영상 참고

<div class="banner_wrap2">

<SCRIPT language="javascript" type="text/javascript">
// 스크롤러의 가로크기
var sliderwidth=910
// 스크롤러의 높이 (이미지의 높이와 맞추어 주세요)
var sliderheight=26
// 스크롤 속도 (클수록 빠릅니다 1-10)
var slidespeed=1
// 배경색상
slidebgcolor="#"

// 이미지들을 설정 하세요
var leftrightslide=new Array()
var finalslide=''
leftrightslide[1]="<img src='/images/banner1.jpg' alt='배너1' />"
leftrightslide[2]="<img src='/images/banner2.jpg' alt='배너2' />"
leftrightslide[3]="<img src='/images/banner3.jpg' alt='배너3' />"
leftrightslide[4]="<img src='/images/banner4.jpg' alt='배너4' />"
leftrightslide[5]="<img src='/images/banner5.jpg' alt='배너5' />"
leftrightslide[6]="<img src='/images/banner6.jpg' alt='배너6' />"
leftrightslide[7]="<img src='/images/banner7.jpg' alt='배너7' />"
leftrightslide[8]="<img src='/images/banner8.jpg' alt='배너8' />"
leftrightslide[9]="<img src='/images/banner9.jpg' alt='배너9' />"
leftrightslide[10]="<img src='/images/banner10.jpg' alt='배너10' />"

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById

if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-4000px">'+leftrightslide+'</span>')

var actualwidth=''
var cross_slide, ns_slide

function fillup(){
    if (iedom){
        cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
        cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
        cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
        actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
        cross_slide2.style.left=actualwidth+5 +"px"
    }
    else if (document.layers){
        ns_slide=document.ns_slidemenu.document.ns_slidemenu2
        ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
        ns_slide.document.write(leftrightslide)
        ns_slide.document.close()
        actualwidth=ns_slide.document.width
        ns_slide2.left=actualwidth+5 +"px"
        ns_slide2.document.write(leftrightslide)
        ns_slide2.document.close()
    }
    lefttime=setInterval("slideleft()",30)
}

function slideleft(){
    if (iedom){
        if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+5))
            cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed +"px"
        else
            cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+5 +"px"

        if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+5))
            cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed +"px"
        else
            cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+5 +"px"

    }
    else if (document.layers){
        if (ns_slide.left>(actualwidth*(-1)+5))
            ns_slide.left-=copyspeed +"px"
        else
            ns_slide.left=ns_slide2.left+actualwidth+5 +"px"

        if (ns_slide2.left>(actualwidth*(-1)+5))
            ns_slide2.left-=copyspeed +"px"
        else
            ns_slide2.left=ns_slide.left+actualwidth+5 +"px"
    }
}

if (iedom||document.layers){
with (document){
  document.write('<div style="padding-top: 3px;">')
  if (iedom){
   write('<div style="position:relative;width:'+sliderwidth+'px;height:'+sliderheight+'px;overflow:hidden">')
   write('<div style="position:absolute;width:'+sliderwidth+'px;height:'+sliderheight+'px;background-color:'+slidebgcolor+'" onfocus="copyspeed=0" onblur="copyspeed=slidespeed" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
   write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
   write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
   write('</div></div>')
  }
  else if (document.layers){
   write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
   write('<layer name="ns_slidemenu2" left="0px" top="0px" onfocus="copyspeed=0" onblur="copyspeed=slidespeed" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
   write('<layer name="ns_slidemenu3" left="0px" top="0px" onfocus="copyspeed=0" onblur="copyspeed=slidespeed" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
   write('</ilayer>')
  }
}
}
</SCRIPT>
<NOSCRIPT></NOSCRIPT>
<script type="text/javascript">fillup();</SCRIPT><NOSCRIPT></NOSCRIPT>
    </div>

위로 흐르는 배너

pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))

this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-
(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent)
window.attachEvent("onunload", function()
{scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle)
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
new pausescroller(pausecontent, "pscroller1", "someclass", 4000) //1000 = 1초

</script>

옆으로 흐르는 배너 버튼으로 제어

위 플래시 영상을 참고하세요.

+ 본페이지

<link rel="Stylesheet" href="/css/layout.css" type="text/css" />
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/src/scriptaculous.js?load=effects"></script>

<div id="loading"></div>
    <div id="Sitelinkcontent" style="display: none;">
     <div id="moving_wrapper" >
      <div id="moving_container" >

              <div class="moving_content" id="moving_1">
                <img src="/images/banner1.gif" alt="배너1" /></a>
              </div>
              <div class="moving_content" id="moving_2">
                <img src="/images/banner1.gif" alt="배너2" /></a>
              </div>
              <div class="moving_content" id="moving_3">
                <img src="/images/banner1.gif" alt="배너3" /></a>
              </div>
              <div class="moving_content" id="moving_4">
                <img src="/images/banner1.gif" alt="배너4" /></a></div>

      </div>
     </div>

    </div>
    <script type="text/javascript">

     var peMover = null;

     Event.observe(window, 'load', function(event) {
      var container = $('moving_container');
      var first = container.childElements()[0];
       $('loading').remove();
       $('Sitelinkcontent').show();

      start_mover();

      var btn_prev = $('btn_prev');
      var btn_next = $('btn_next');
      var btn_play = $('btn_play');
      var btn_stop = $('btn_stop');
      Event.observe(btn_prev, 'click', move_prev);
      Event.observe(btn_next, 'click', move_next);
      Event.observe(btn_play, 'click', start_mover);
      Event.observe(btn_stop, 'click', stop_mover);
     });

     function stop_mover() {
      if (peMover != null) {
       peMover.stop();
       peMover = null;
      }
     }

     function start_mover() {
      stop_mover();

      peMover = new PeriodicalExecuter(function(pe) {
       move_next();
      }, 3);
     }

     function move_prev(event) {
      var btn_prev = $('btn_prev');
      btn_prev.stopObserving('click');
      stop_mover();

      var container = $('moving_container');
      var first = container.childElements()[0];
      var length = container.childElements().length
      var last = container.childElements()[length-1];

      new Effect.Move(container, {duration: 0, x : -(first.getDimensions().width), mode:'absolute', afterFinish: function() {
       last = last.remove();
       first.insert({before: last});

       new Effect.Move(container, {duration: 0.3, x : 0, mode:'absolute', afterFinish: function() {
        var btn_prev = $('btn_prev');
        Event.observe(btn_prev, 'click', move_prev);
        start_mover()
       }});
      }});

}

</script>

b_mine.zip

css, js 파일은 첨부파일 참조.

CMS Tips

주간 인기 검색어 상세보기

2024년 12월 16일 ~ 12월 22일