以下プログラム内の、p.noteの画面いっぱいに表示されている画像の上に
#flipbookというページがめくれる効果をもつノートを中央に表示させたいのです。
いろいろと調べ試してみたのですが、p.noteの下にめくりたいページが12個並んで表示されるだけです…

お手数をおかけし申し訳ございませんが、どうぞよろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    </style>
    <meta name="description" content=""/>
    <link rel="stylesheet" href="css/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script>
  $(function() {
  // 画面初回表示時
  $('p.note').hide();

  // image/1.jpgをクリック時の処理
  $('p.button').click(function(){
    // 'p.note'を表示
    $('p.note').show();
    // 'p.button'を非表示
    $(this).hide();
  });
  });
  </script>
</head>

<body>
<!--ボタンの画像表示-->
<p class="button">
  <img style="width: 100%;" src="image/1.jpg" alt="ボタン"  >
</p>

<!--ノートの画像表示-->
<p class="note">
  <img style="width: 100%;" src="image/2-1.jpg" alt="ノート" >
</p>

<!--ノートの切り替え-->
<div id="flipbook">
 <div><img src="image/note_1.jpg" alt=""></div>
 <div><img src="image/note_2_1.jpg" alt=""></div>
 <div><img src="image/note_2_2.jpg" alt=""></div>
 <div><img src="image/note_2_3.jpg" alt=""></div>
 <div><img src="image/note_2_4.jpg" alt=""></div>
 <div><img src="image/note_2_5.jpg" alt=""></div>
 <div><img src="image/note_2_6.jpg" alt=""></div>
 <div><img src="image/note_2_7.jpg" alt=""></div>
 <div><img src="image/note_3_1.jpg" alt=""></div>
 <div><img src="image/note_3_2.jpg" alt=""></div>
 <div><img src="image/note_4_1.jpg" alt=""></div>
 <div><img src="image/note_5_1.jpg" alt=""></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/turn.min.js"></script>

<script type="text/javascript">
$(function(){
 $('#flipbook').turn({
 width:1000,
 height:600,
 autoCenter: true
 });
});

</body>
</html>