shangshang
/
hhqtest


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.fullpage.js"></script>
    <style>
        .page{
            font-size: 72px;
            line-height: 200px;
            text-align: center;
        }
        .page1{
            background: red;
        }
        .page2{
            background: blue;
        }
        .page3{
            background: #de21c8;
        }
        .page4{
            background: green;
        }
        .indicator{
            position: fixed;
            right: 10px;
            top: 50%;
            margin-top: -40px;
        }
        .indicator li{
            margin-top: 10px;
            width: 10px;
            height: 10px;
            border-radius: 100px;
            background: rgba(0,0,0,0.5);
            text-indent: -9999px;
            list-style: none;
        }
        .indicator li.cur{
            background: rgba(255,255,255,0.5);
        }
    </style>
    <script>
        $(function(){
            $('#fullpage').fullpage({
                change: function (e) {
                    console.log('change', e.next, e.cur);
                    $('.indicator li').removeClass('cur').eq(e.cur).addClass('cur');
                },
                beforeChange:function(e){
                    console.log('beforeChange', e.next, e.cur);

                    if(e.next ==2){ //第三页停止 从0开始计算
                        $.fn.fullpage.stop()
                    } else {
                        $.fn.fullpage.start()
                    }
                },
                afterChange: function (e) {
                    console.log('afterChange', e.next, e.cur);
                },
                loop:true
            });

        });

    </script>
</head>

<body ontouchstart>
<div class="fullpage">
    <div id="fullpage">
        <div class="page page1">1</div>
        <div class="page page2">2</div>
        <div class="page page3">

            <a href="javascript:;" class="weui-btn weui-btn_primary"  onclick="$.fn.fullpage.moveNext(true);">下一页</a>
        </div>
        <div class="page page4">4</div>
    </div>

    <ul class="indicator">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</div>
<span class="start"><b></b></span>
</body>
</html>