HTML5とjQueryを使用して、ボタンを押すと本のようにページがぱらぱらめくれるアプリケーションを作成しています。
画像はサーバー上にあり、URLで取得する形にしたいのですが、最初の一ページ目は画像表示されるものの、ボタンを押すと画像が表示されません。
初心者で大変恐縮ですが、どなた様か助けてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>書籍</title> <link rel="stylesheet" href="test2_css.css"> <!-- jQuery CDN --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"> </script> <script> var max = 3; //画像の最大枚数3枚 var img1 = 1; var img2 = 2; function next() { if (img1 == 1) { img1 = max; img2 = 1; } else { img1 = img1 - 1; img2 = img1 + 1; if (img2 > max) { img2 = 1; } } $('#img1').attr('src',img1 + '.jpg'); $('#img2').attr('src',img2 + '.jpg'); } function back() { if (img1 == max) { img1 = 1; img2 = 2; } else { img1 = img1 + 1; img2 = img1 + 1; if (img2 > max) { img2 = 1; } } $('#img1').attr('src', img1 + '.jpg'); $('#img2').attr('src', img2 + '.jpg'); } $(document).ready( function() { $('#next').click(next); $('#back').click(back); } ); </script> </head> <body> <header> <h1>本</h1> </header> <article> <img id="img1" src="http://localhost/testpic/1.jpg"> <img id="img2" src="http://localhost/testpic/2.jpg"> </article> <div> <section class="demo"> <button id="back">前へ</button> <button id="next">次へ</button></section> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー