いつも大変お世話になっております。

HTML、css、jQueryの初心者です。
会社からの指示でホームページを作成することになりました。
作成時間は業務時間外で休日を使うしかない状況です。
デザインはできたのですが、プログラムで大変苦戦しています。
どうぞ宜しくお願いいたします。

やりたい処理の流れです。

（１）最初の画面をクリックすると次の画面が表示される
（２）表示された画面の中央にはjQueryのOneBook3dでページがめくれる機能をのせたonebook3dSampleが表示されている

上記の流れで（２）ができません。

また、（１）の最初の画面は、上1行ぶんあいて表示されるので、背景のdesktop.jpgが見えてしまいます。

JSフォルダ内のファイルです。
jquery.mousewheel.min.js
jquery.onebook3d-2.33.js
jquery-1.11.0.min.js
jquery-3.3.1.min.js
OneBook3d_sample.js
three.min.js

プログラムです。

■css
html,body{width:100%;margin:0px;padding:0px;background:#e0604a url('desktop.jpg');color:#ffffff;min-width:800px;}
body * { -webkit-tap-highlight-color: rgba(0,0,0,0);}
.links a:link,.links a:visited{color:black;text-decoration:none;font:15px sans-serif;}
.links a:hover{color:black;text-decoration:underline;}
.headtitle p{text-align:center;margin:0px;padding:20px;font:16px; sans-serif;line-height:140%;}
.headtitle2 p{text-align:center;margin:0px;padding:20px;font:16px; sans-serif;line-height:140%;}
/address{margin:0px auto 50px auto;padding:0px;width:800px;text-align:center;}
/address, .address a{font:13px arial, sans-serif;color:black;}


■HTML
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="description" content="">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./css/jquery-OneBook3d.css"/>
        <script type="text/javascript" charset="utf-8" src="./js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="./js/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="./js/three.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="./js/jquery.onebook3d-2.33.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/turn.js/3/turn.min.js"></script>

  </head>

  <body>

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

<!--ノートの画像表示-->
<p class="note">

</p>

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

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

    // turn.js 3rd
    $('#flipbook').turn({
        width:1000,
        height:600,
    });
    });
</script>

<!--ノートをめくる-->
<div id="onebook3dSample"></div>      

<script>
     $(function () {
       var imgArray = [
         ['./img/img_001.jpg', 'title1'],
         ['./img/img_002.jpg', 'title2'],
         ['./img/img_003.jpg', 'title3'],
         ['./img/img_004.jpg', 'title4'],
         ['./img/img_005.jpg', 'title5'],
         ['./img/img_006.jpg', 'title6'],
         ['./img/img_007.jpg', 'title7'],
         ['./img/img_008.jpg', 'title8'],
         ['./img/img_009.jpg', 'title9'],
         ['./img/img_010.jpg', 'title10'],
         ['./img/img_011.jpg', 'title11']
       ];

       $('#onebook3dSample').onebook(imgArray, {
         startPage: 1,
         flip: 'soft',
         skin: 'dark',
         bgDark: '#222222 url(./img/desktop.jpg)',
         pageColor: '#FFFFFF',
         slope: 0,
         border: 0,
         language: 'en',
         cesh: true
       });
     });
</script>

</body>
</html>