iscroll4 윤방도 효과 구현

많은 사람들이 나와 마찬가지로 iscroll을 사용할 때 수동으로 미끄러질 수 있다는 것만 알고 iscroll의 윤방이 어떻게 실현되는지 모르는 것이 바로 내가 한 윤방 효과로 직접 측정하는 데 효과가 있다.
1. html, 당연히 아래 작은 원점을 동적으로 추가할 수 있다

<div id="wrapper">

    <div id="scroller">

        <ul id="thelist">

            <li><strong>1.</strong> <em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li>

            <li><strong>2.</strong> <em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li>

            <li><strong>3.</strong> <em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li>

            <li><strong>4Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li>

        </ul>

    </div>

</div>

<div id="nav">

    <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">&larr; prev</div>

    <ul id="indicator">

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

    <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next &rarr;</div>

</div>

2.css

<style type="text/css" media="all">

body, ul, li {

	padding: 10px;

	margin: 0;

}

body {

	font-size: 12px;

	-webkit-user-select: none;

	-webkit-text-size-adjust: none;

	font-family: helvetica;

}

#wrapper {

	width:100%;

	height: 160px;

	float: left;

	position: relative;	/* On older OS versions "position" and "z-index" must be defined, */

	z-index: 1;			/* it seems that recent webkit is less picky and works anyway. */

	overflow: hidden;

	background: #aaa;

	-webkit-border-radius: 10px;

	-moz-border-radius: 10px;

	-o-border-radius: 10px;

	border-radius: 10px;

	background: #e3e3e3;

}

#scroller {

	/*width: 2100px;*/

	height: 100%;

	float: left;

	padding: 0;

}

#scroller ul {

	list-style: none;

	display: block;

	float: left;

	width: 100%;

	height: 100%;

	padding: 0;

	margin: 0;

	text-align: left;

}

#scroller li {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	-o-box-sizing: border-box;

	box-sizing: border-box;

	display: block;

	float: left;

	/*width: 300px;*/

	height: 160px;

	text-align: center;

	font-family: georgia;

	font-size: 18px;

	line-height: 140%;

}

#nav {

	width:100%;

	float: left;

}

#prev, #next {

	float: left;

	font-weight: bold;

	font-size: 14px;

	padding: 5px 0;

	width: 80px;

}

#next {

	float: right;

	text-align: right;

}

#indicator, #indicator > li {

	display: block;

	float: left;

	list-style: none;

	padding: 0;

	margin: 0;

}

#indicator {

	width: 110px;

	padding: 12px 0 0 30px;

}

#indicator > li {

	text-indent: -9999em;

	width: 8px;

	height: 8px;

	-webkit-border-radius: 4px;

	-moz-border-radius: 4px;

	-o-border-radius: 4px;

	border-radius: 4px;

	background: #ddd;

	overflow: hidden;

	margin-right: 4px;

}

#indicator > li.active {

	background: #888;

}

#indicator > li:last-child {

	margin: 0;

}

</style>

3. js, 여기 내가 사용하는 jquery의 테스트, 너도 자신의 취향에 따라 다른 라이브러리를 선택할 수 있다

<script src="js/jquery.js"></script>

<script src="js/iscrollc.js"></script>

<script type="text/javascript">

    var myScroll;

    var timer;

    var i=0;

    var obj=$('#wrapper');

    var obj_w=obj.outerWidth(true);

    var oli=obj.find('li');

    var oli_l=oli.length;

    oli.outerWidth(obj_w);

    $('#scroller').width(oli_l*obj_w);

    function loaded() {

        myScroll = new iScroll('wrapper', {

            snap: true,

            momentum: false,

            hScrollbar: false,

            onScrollEnd: function () {

                document.querySelector('#indicator > li.active').className = '';

                document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';

            },

            onBeforeScrollStart:function(){

                clearInterval(timer);

                },

            onTouchEnd:function(){

                timer=setInterval(gund,2000);

                i=myScroll.currPageX

                },

         });



    timer=setInterval(gund,2000); 

    function gund(){ // 5   

          i++;

          

          if(i==oli_l){

              i=0;

              myScroll.scrollToPage(0, 0, 1000); //     

          } else {

              myScroll.scrollToPage('next', 0);

           };

           document.title=i

        };    

    

};

document.addEventListener('DOMContentLoaded', loaded, false);

</script>

html과 css는 말할 것도 없이 모두 전문가이다. 주로 js이다. 먼저 초기화하고 iscorll이 제공하는 API에 따라 해당하는 코드를 수정한다. 여기는 주로 칼온비포어 Scroll Start, onScroll End, onTouch End 등 세 가지 사건을 사용하고 scroll ToPage()와currPageX 사건을 결합하여 대응하는 정시 수정을 하고 미끄러진 후에 자동으로 굴러가는 페이지 수를 동기화하면 ok이다. 사실 이것은 주로 API에 익숙하다.