복붙용 배너슬라이드(롤링) 소스 예제 - 기본형 정보
JavaScript 복붙용 배너슬라이드(롤링) 소스 예제 - 기본형
관련링크
본문
가장 기본형 예제입니다.
단순히 배너 롤링 시킬 때 사용합니다.
<style type="text/css">
#widget-slide-1 {position:relative;margin:20px auto;width:600px; height:400px;border:5px solid gray;}
#widget-slide-1 ul{position:relative;width:100%; height:100%;padding:0px;margin:0px;list-style:none;}
#widget-slide-1 ul li{position:absolute;width:100%; height:100%; display:none; /*순번표기용*/text-align:center;font-size:20pt;line-height:390px;/*순번표기용 끝*/}
#widget-slide-1 ul li.on{display:block;}
</style>
<div id="widget-slide-1">
<ul>
<li style="background-color:white;" class="on">1</li>
<li style="background-color:red;">2</li>
<li style="background-color:green;">3</li>
<li style="background-color:blue;">4</li>
<li style="background-color:yellow;">5</li>
</ul>
</div>
<script type="text/javascript">
<!--
function setSlide(){// 동작 함수 생성
var box = document.getElementById("widget-slide-1");
var elm = box.getElementsByTagName( 'li' );
var max = elm.length-1;
var now = 0;
var next = 0;
var tmr = null;
var timr = 3000;
function change(){if(next > max) next = 0; else if(next < 0) next = max; for(var i=0; i <= max; i++ )elm[i].className = "";elm[next].className = "on";now = next;}
function befor(){next--; change();}
function after(){next++; change();}
function stop(){ clearInterval(tmr);}
function start(){tmr = setInterval(function(){after();}, timr); }
if(max>0){start();}
}
setSlide();// 실행
//-->
</script>
데모 -
0
