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的宽需要为每幅图片宽度*图片数，每个li要有float:left。