- 締切済み
連番画像「次へ」「前へ」で、目次に戻るには
目次のページに春・夏・秋・冬と項目があり、「夏」を選ぶと、 「夏」のフォルダ（natu1.jpgからnatu10.jpgまでの画像が入っています）のnatu1.jpg が表示され、 「次へ」を押すと次の番号の画像、「前へ」を押すと前の番号の画像へ戻るようにしたいと思い、 こちらを参考に http://okwave.jp/qa/q1905352.html できたのですが、 natu1.jpgが表示されている時の、「前へ」や、natu10．jpgが表示されている時の「次へ」で 目次のページに戻ることはできますか？ もしくはnatu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ、natu2.jpg ～ natu9.jpgの間は「次へ」と「前へ」の両方が表示されるようにと言うのは出来ますか？
- wpc_suzumeya
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 サンプルをどうぞってURL貼ったら削除され、もうその方法は出来ないようなので以下に全文貼ります。 内容見てみてわからなかったら補足下さい。 <!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>【OKWave回答サンプル集】連番画像「次へ」「前へ」で、目次に戻るには</title> <link rel="stylesheet" href="/okwave/qa/css/basic.css" /> <!--[if lt IE 9]> <script src="/okwave/qa/js/html5.shiv.js"></script> <![endif]--> <script> var MAX_NUMBER = 3; var index1 = 1; var prevObj1; var nextObj1; var imgObj1; var index2 = 1; var prevObj2; var nextObj2; var imgObj2; window.onload = function() { //============================================================================== // ここはサンプル1用 //============================================================================== prevObj1 = document.getElementById('lnk-prev1'); nextObj1 = document.getElementById('lnk-next1'); imgObj1 = document.getElementById('img-main1'); prevObj1.onclick = function() { changeImage1 ( -1 ); return false; } nextObj1.onclick = function() { changeImage1 ( 1 ); return false; } //============================================================================== // ここはサンプル2用 prevObj2 = document.getElementById('lnk-prev2'); nextObj2 = document.getElementById('lnk-next2'); imgObj2 = document.getElementById('img-main2'); prevObj2.onclick = function() { changeImage2 ( -1 ); return false; } nextObj2.onclick = function() { changeImage2 ( 1 ); return false; } // 先頭画像表示で呼出 changeImage2 ( 0 ); //============================================================================== } function changeImage1 ( flg ) { index1 += flg; if ( index1 < 1 || index1 > MAX_NUMBER ) { // 目次へ移動 location.href = 'mokuji.html'; return; } // 画像を変更 imgObj1.src = 'images/natsu/natsu' + index1 + '.png'; } function changeImage2 ( flg ) { index2 += flg; // 1を表示した場合は「前へ」を非表示、それ以外は表示 prevObj2.style.visibility = index2 === 1 ? 'hidden' : 'visible'; // 最大数を表示した場合は「次へ」を非表示、それ以外は表示 nextObj2.style.visibility = index2 === MAX_NUMBER ? 'hidden' : 'visible'; // 画像を変更 imgObj2.src = 'images/natsu/natsu' + index2 + '.png'; } </script> <style> div.image { width: 200px; } div.image p { text-align: center; } </style> </head> <body> <div class="wrapper"> <header> <h1>連番画像「次へ」「前へ」で、目次に戻るには(q8237457)</h1> </header> <div class="main"> <section> <h2>サンプル1</h2> <div class="image"> <img src="images/natsu/natsu1.png" id="img-main1" width="200" height="200" alt="画像" /> <p> <a href="#" id="lnk-prev1">前へ</a> <a href="#" id="lnk-next1">次へ</a> </p> </div> </section> <section> <h2>サンプル2(最初または最後で「前へ」または「次へ」を非表示)</h2> <div class="image"> <img src="images/natsu/natsu1.png" id="img-main2" width="200" height="200" alt="画像" /> <p> <a href="#" id="lnk-prev2">前へ</a> <a href="#" id="lnk-next2">次へ</a> </p> </div> </section> </div> </div> </body> </html> <!-- q8237457 -->
- fujillin
- ベストアンサー率61% (1594/2576)
＞「前へ」や、「次へ」で目次のページに戻ることはできますか？ できます。 ＞natu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ表示されるようにと言うのは出来ますか？ できます。 前者は、ご参考にしているスクリプトで次に表示する番号が0や11になっていたら1や10に修正しているところを、目次を表示するように変えてあげればよろしいかと。 後者は、似たような条件分岐を作成し、各ボタンの表示/非表示を制御するようにしてあげればよろしいでしょう。
お礼
お礼が遅くなりました。 if (iCnt < から数行部分を書き換えて望み通りに、できました。ありがとうございました。