iscroll 가로 방향 슬라이딩 (현재 페이지 상태 표시 자동 변화)

var myScroll;



function loaded(){

    myScroll = new iScroll('wrapper',{

        snap:true,

        checkDOMChanges:true,

        hScrollbar:false,

        vScrollbar:false,

        momentum:false,

        onScrollEnd:function(){

            document.querySelector('.product_nav > span.push').className = 'nav';

            document.querySelector('.product_nav > span:nth-child('  + (this.currPageX+1) + ')').className = 'nav push';

        }

    });

}



$(document).on('DOMContentLoaded', function () { setTimeout(loaded, 200); });

css 섹션 코드는 다음과 같습니다.

<div id='wrapper'>

    <div id='scroller'>

        <ul>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <li><img src='' /></li>

            <div style='clear:both;'></div>

        </ul>

    </div>

</div>

<div class='product_nav'>

    <span class='nav push'></span>

    <span class='nav'></span>

    <span class='nav'></span>

    <span class='nav'></span>

    <span class='nav'></span>

</div>

#wrapper의 너비는 내부 그림의 너비로 할 수 있으나overflow:hidden;#scroller의 너비는 한 폭의 그림 너비* 그림 수이며, 리마다float:left가 있어야 합니다.