흐르는 배너, 움직이는 배너, 이동하는 배너, 배너 롤링....
다 같은 말이지만.. 검색하실 떄 어떤 말을 쓰시나요?ㅋㅋ
단순하게 옆으로 흐르는 배너, 위로 올라가는 배너와
버튼으로 다음배너, 이전배너, 움직임 정지, 움직임 시작으로 제어할 수 있는 흐르는 배너..
소스들 입니다.
옆으로 흐르는 배너
위 플래시 영상 참고
<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>
css, js 파일은 첨부파일 참조.