<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <title></title>
    <style type="text/css">
        html,
        body {
            height: 100%;
        }
        body,
        ul,
        li,
        a,
        p,
        div {
            padding: 0px;
            margin: 0px;
        }
        #wrap {
            overflow: hidden;
            width: 100%;
        }
        #main {
            top: 0;
            position: relative;
        }
        .page {
            width: 100%;
            margin: 0;
        }
        #pageUl {
            color: #8a6d3b;
            position: fixed;
            right: 10px;
        }
        #nextButton,#lastButton {
            color: #000;
            background-color: #8a6d3b;
            border: none;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="main">
            <div><button  id="nextButton" style="position: fixed; bottom: 10px; right: 10px;">Next Page</button></div>
            <div><button  id="lastButton" style="position: fixed; bottom: 10px; right: 100px;">Last Page</button></div>
            <ul id="pageUl" type="circle">
                <li id="pageUlLi1" class="pageUlLi" style="color: red;"> </li>
                <li id="pageUlLi2" class="pageUlLi"> </li>
                <li id="pageUlLi3" class="pageUlLi"> </li>
                <li id="pageUlLi4" class="pageUlLi"> </li>
                <li id="pageUlLi5" class="pageUlLi"> </li>
                <li id="pageUlLi6" class="pageUlLi"> </li>
                <li id="pageUlLi7" class="pageUlLi"> </li>
            </ul>
            <div id="page1" class="page">
                <iframe src="/home" frameborder="0" height="100%" width="100%" class="if00"></iframe>
            </div>
            <div id="page2" class="page">
                <iframe src="/wordcloud/1" frameborder="0" height="100%" width="100%" class="if00"></iframe>
            </div>
            <div id="page3" class="page">
                <iframe src="/wordcloud/0" frameborder="0" height="100%" width="100%" class="if00"></iframe>
            </div>
            <div style="background-color: #8a6d3b" id="page4" class="page">
                <iframe src="/test" frameborder="0" id="iframe0" height="100%" width="100%" class="if00"></iframe>
            </div>
            <div style="background-color: #337ab7" id="page5" class="page">
                <iframe src="test" frameborder="0" id="iframe3" height="100%" width="100%" class="if00"></iframe>
            </div>
            <div style="background-color: #337ab7" id="page6" class="page">
                <iframe src="test" frameborder="0" id="iframe4" height="100%" width="100%" class="if00"></iframe>
            </div>
            <div style="background-color: #337ab7" id="page7" class="page">
                <iframe src="test" frameborder="0" id="iframe5" height="100%" width="100%" class="if00"></iframe>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        window.onload = resizeImages;
        window.onresize = resizeImages;

        function resizeImages() {
            $(function (e) {
                var screenWeight = document.documentElement.clientWidth;
                var screenHeight = document.documentElement.clientHeight;
                $("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);
                $("#pageUl").css("bottom", screenHeight >> 1);
            });
        }

        var index = 1;
        var curIndex = 1;
        var wrap = document.getElementById("wrap");
        var main = document.getElementById("main");
        var hei = document.body.clientHeight;
        wrap.style.height = hei + "px";
        var obj = document.getElementsByTagName("div");
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].className == 'page') {
                obj[i].style.height = hei + "px";
            }
        }
        var pageNum = document.querySelectorAll(".page").length;

        var startTime = 0,
            endTime = 0,
            now = 0;
        if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
            document.addEventListener("DOMMouseScroll", scrollFun, false);
        } else if (document.addEventListener) {
            document.addEventListener("wheel", scrollFun, false);
        } else if (document.attachEvent) {
            document.attachEvent("onmousewheel", scrollFun);
        } else {
            document.onmousewheel = scrollFun;
        }

        function scrollFun(event) {
            startTime = new Date().getTime();
            var delta = event.detail || (-event.wheelDelta);
            console.info(index);
            if ((endTime - startTime) < -1000) {
                if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {
                    index++;
                    toPage(index);
                    // iframeAddEventListener();
                }
                if (delta < 0 && parseInt(main.offsetTop) < 0) {
                    index--;
                    toPage(index);
                    // iframeAddEventListener();
                }
                endTime = new Date().getTime();
            } else {
                event.preventDefault();
            }
        }

        function toPage(idx) {
            if (idx != curIndex) {
                index = idx
                var delta = idx - curIndex;
                now = now - delta * hei;
                $("#main").animate({
                    top: (now + 'px')
                }, 500);
                curIndex = idx;
                $(".pageUlLi").css("color", "#8a6d3b");
                $("#pageUlLi" + idx).css("color", "red");
            }
        }

        document.getElementById("nextButton").onclick = function () {
            if (index < pageNum) {
                index++;
                toPage(index);
            }
        };
        document.getElementById("lastButton").onclick = function () {
            if (index > 1) {
                index--;
                toPage(index);
            }
        };
        document.getElementById("pageUlLi1").onclick = function () {
            toPage(1);
        }
        document.getElementById("pageUlLi2").onclick = function () {
            toPage(2);
        }
        document.getElementById("pageUlLi3").onclick = function () {
            toPage(3);
        }
        document.getElementById("pageUlLi4").onclick = function () {
            toPage(4);
        }
        document.getElementById("pageUlLi5").onclick = function () {
            toPage(5);
        }
        document.getElementById("pageUlLi6").onclick = function () {
            toPage(6);
        }
        document.getElementById("pageUlLi7").onclick = function () {
            toPage(7);
        }
    </script>

</html>
