Javascript 롤링(슬라이드) 소스 예제

데모 - http://demo.widgets.co.kr/?c=73/84/85

가장 기본형 예제입니다.

단순히 배너 롤링 시킬 때 사용합니다.

<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>

데모 - http://demo.widgets.co.kr/?c=73/84/85