끊김없이 흐르는 배너(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> 





위로 흐르는 배너 

<style type="text/css">
#pscroller1{
width: 600px;
height: 50px;
padding: 5px;
}
#pscroller2 a{
text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<div id="div1" style="display:none;">
  <img src="/imgs/img1-1.jpg" alt="배너1-1">
  <img src="/imgs/img1-2.jpg" alt="배너1-2">
  <img src="/imgs/img1-3.jpg" alt="배너1-3">
  <img src="/imgs/img1-4.jpg" alt="배너1-4">
  <img src="/imgs/img1-5.jpg" alt="배너1-5">
  <img src="/imgs/img1-6.jpg" alt="배너1-6">
 </div>
 <div id="div2" style="display:none;">
  <img src="/imgs/img2-1.jpg" alt="배너2-1">
  <img src="/imgs/img2-2.jpg" alt="배너2-2">
  <img src="/imgs/img2-3.jpg" alt="배너2-3">
  <img src="/imgs/img2-4.jpg" alt="배너2-4">
  <img src="/imgs/img2-5.jpg" alt="배너2-5">
  <img src="/imgs/img2-6.jpg" alt="배너2-6">
 </div>
<script type="text/javascript">
var pausecontent=new Array()
pausecontent[0]=div1.innerHTML
pausecontent[1]=div2.innerHTML
</script>

<script type="text/javascript">

function pausescroller(content, divId, divClass, delay){
this.content=content
this.tickerid=divId
this.delay=delay
this.mouseoverBol=0
this.hiddendivpointer=1
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: absolute; top:360px; overflow: hidden"><div class="innerDiv" style="position: absolute; left:43px;width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; left:43px;width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener)
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent)
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById)
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

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>

     <ul class="player">
      <a href="#play" id="btn_play" ><img  src="/images/b_play.gif" alt="재생" /></a>
      <a href="#stop" id="btn_stop" ><img  src="/images/b_stop.gif" alt="중지" /></a>
      <a href="#next" id="btn_next" ><img  src="/images/b_ff.gif" alt="이전" /></a>
      <a href="#prev" id="btn_prev" ><img  src="/images/b_re.gif"  alt="다음" /></a>
     </ul>

    </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_next(event) {
      var btn_next = $('btn_next');
      btn_next.stopObserving('click');
      stop_mover();
      
      var container = $('moving_container');
      var first = container.childElements()[0];
      var second = container.childElements()[1];
      
      new Effect.Move(container, {duration: 0.3, x : -(first.getDimensions().width), mode:'absolute', afterFinish: function() {
       container.setStyle({left : '0px'});
       first = first.remove();
       container.insert({bottom: first});
       
       var btn_next = $('btn_next');
       Event.observe(btn_next, 'click', move_next);
       start_mover()
      }});
     }

     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 파일은 첨부파일 참조.