티스토리 뷰

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

저작자 표시 비영리 변경 금지
신고
댓글
  • 프로필사진 비밀댓글입니다 2016.11.17 14:21
  • 프로필사진 Favicon of http://jamdol.tistory.com BlogIcon 잠덜 현재 소스는 연산이 없습니다.
    3000이란 값이 들어가 있으니 그냥 한번에 3000으로 이동합니다.
    이걸 1부터 시작해서 천천히 움직여야겠죠.
    window.scrollTo(3000,100); 부분에 연산된 값이 들어가야 원하는 동작이 구현될 것입니다.
    그리고 스크롤 이동으로 만들게 아니라... 그냥 레이어 이동으로 만드셔야 할 것 같습니다.
    지금 소스를 수정해서 사용할게 아니라 일단 처음부터 차근차근 공부하시길 권합니다.
    스크롤로 동작되는 게임은 아닌것 같습니다.

    2017.01.23 18:01 신고
댓글쓰기 폼