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。