1

因此，我接到了创建自定义动画书的任务，在其中使用 div 标签中的图像，我成功地创建了一个。用户可以使用上一个/下一个按钮翻页，也可以像其他动画书那样通过角落翻阅。

我关心的是显示 PageNumbers。通过按钮更改页面，页面动态更改，但是在翻阅 turn.js 时，页码不会更新。

我提供了我使用过的代码片段。任何形式的帮助和指导表示赞赏！

<!DOCTYPE html>

<head>
  <title>Flipbook Demo</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script type="text/javascript" src="turn.min.js"></script>
</head>
<style>
  body{
    background-color: #313131;
  }

  #flipbook {
    margin-top: 1.5%;
    margin-left: 6%;
    width: 1130px;
    height: 800px;
    position: relative;
    overflow: hidden;
  }

  #nav_controls{
      margin: 1.5%;
      margin-left: 44%;
  }
  
</style>
    <body> 
        <h1 style="color: white; margin-left: 43%">FITI5 WHITEPAPER</h1>
        <div id="flipbook">
            <!-- Include Pages into div that you want to include -->
        </div>
        
        <div id="nav_controls">
            <button id="startdoc"><-</button>
            <button id="prev_page"> PREV </button>
            <span id="pgnos" style="margin-left: 2%; color: white;">1</span>   
            <button id="next_page" style="margin-left: 2%;"> NEXT </button>
            <button id="enddoc">-></button>
            <!--
            <button id="zoom-in">+</button>
            <buton id="zoom-out">-</button>-->
        </div>

        <script type="text/javascript">
            const startButton = document.querySelector("#startdoc");
            const endButton = document.querySelector("#enddoc");
            const prevButton = document.querySelector("#prev_page");
            const nextButton = document.querySelector("#next_page");
            const showPG = document.querySelector("#pgnos");
            
            //magnify = document.querySelector("#zoom-in");
            //minify = document.querySelector("#zoom-out");

            /*
            magnify.addEventListener('click', function() {
                $("#flipbook").turn("zoom", 1.1, 1);
            });
            minify.addEventListener('click', function() {
                $("#flipbook").turn("zoom", 1, 1.1);
            })  
            */
            
            $("#flipbook").turn({
                gradients: true,
                page: 1,
                duration: 2000
            });


            const first_page = $("#flipbook").turn("page");
            const last_page = $("#flipbook").turn("pages");    
            
            
            startButton.addEventListener('click', function() {
                $("#flipbook").turn("page", first_page);
                showPG.innerHTML = first_page;
            });

            endButton.addEventListener('click', function() {
                $('#flipbook').turn("page", last_page);
                showPG.innerHTML = last_page;
            });

            nextButton.addEventListener('click', function() {
                $("#flipbook").turn("next");
                showPG.innerHTML = $("#flipbook").turn("page");
            });

            prevButton.addEventListener('click', function() {
                $("#flipbook").turn("previous");
                showPG.innerHTML = $("#flipbook").turn("page");             
            });


            if ( (($("#flipbook").turn("page") == first_page)) ) {
                $(nextButton).click(function() {
                    $("#flipbook").animate({left: "275"});
                });

                $(endButton).click(function() {
                    $("#flipbook").animate({left: "565"});
                });

                $(prevButton).click(function() {
                    $("#flipbook").animate({left: "275"});
                });

                $(startButton).click(function() {
                    $("#flipbook").animate({left: "0"});
                });
            } 


            if ( (($("#flipbook").turn("page") == last_page)) ) {
                $(prevButton).click(function() {
                    $("#flipbook").animate({left: "300"});
                });   
            }

      
        </script>
    </body>
</html>
4

0 回答 0