iscroll横向滑动(当前页状态标记自动变化)

最新推荐文章于 2019-04-17 11:59:38 发布

转载最新推荐文章于 2019-04-17 11:59:38 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hitbs228/p/3688890.html

本文介绍了一个使用iScroll插件实现水平滑动效果的例子。通过JavaScript和CSS结合使用，实现了图片轮播功能，并在滚动结束时更新导航指示器样式。代码中详细展示了如何初始化iScroll、设置选项以及如何监听滚动结束事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。

转载于:https://www.cnblogs.com/hitbs228/p/3688890.html