• 締切済み

連番画像「次へ」「前へ」で、目次に戻るには

目次のページに春・夏・秋・冬と項目があり、「夏」を選ぶと、 「夏」のフォルダ（natu1.jpgからnatu10.jpgまでの画像が入っています）のnatu1.jpg が表示され、 「次へ」を押すと次の番号の画像、「前へ」を押すと前の番号の画像へ戻るようにしたいと思い、 こちらを参考に　http://okwave.jp/qa/q1905352.html　できたのですが、 natu1.jpgが表示されている時の、「前へ」や、natu10．jpgが表示されている時の「次へ」で 目次のページに戻ることはできますか？ もしくはnatu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ、natu2.jpg　～　natu9.jpgの間は「次へ」と「前へ」の両方が表示されるようにと言うのは出来ますか？

回答 全件
こんにちは。 サンプルをどうぞってURL貼ったら削除され、もうその方…
＞「前へ」や、「次へ」で目次のページに戻ることはできますか？ できます…

みんなの回答

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 サンプルをどうぞって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)
回答No.1

＞「前へ」や、「次へ」で目次のページに戻ることはできますか？ できます。 ＞natu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ表示されるようにと言うのは出来ますか？ できます。 前者は、ご参考にしているスクリプトで次に表示する番号が0や11になっていたら1や10に修正しているところを、目次を表示するように変えてあげればよろしいかと。 後者は、似たような条件分岐を作成し、各ボタンの表示/非表示を制御するようにしてあげればよろしいでしょう。

wpc_suzumeya
質問者

お礼

お礼が遅くなりました。 if (iCnt < から数行部分を書き換えて望み通りに、できました。ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 目次ページ内にて

    こんにちわ。 以下のような目次ページを作成したいのですが、 ページ番号の前の「・・・・」はどうすればつけられますか？ 教えて下さいm(__)m 　　　目 次 1. ○○○・・・・・・・・・・1 2. ○○○ 　　(1)・・・・・・・・・・・・2 　　(2)・・・・・・・・・・・・4 3.○○○・・・・・・・・・・1

  • WORDの目次

    WORD2003で目次を作成（挿入→参照→索引と目次）しています。 目次を作成すると、目次とページ番号が一覧となって表示しますが、 ページ番号のスタイル（？）を変えられますか？ 【例】 ●ページ番号/全ページ ●第1章-ページ番号 ヘッダが上記のようになっていて、目次とヘッダがリンクするような かたちを考えているのですが？

  • クリックで次の画像へ

    xxx_yyy_1.jpgからxxx_yyy_10.jpgという連番の画像を [次へ]を押すと次の番号の画像へ [戻る]を押すと前の番号の画像へ という事はできるのでしょうか？

  • 目次と実際のページがずれる【Word 2016】

    今、Wordで文書を作成しています。 目次機能を使っているのですが、 そこで表示されるページが、実際のページと異なってしまいます。 たとえば、目次で「3ページ」と表示されていたとします。 しかし、実際には、その見出しは「4ページ」目にあるのです。 目次に表示されているすべてのページ番号が、 実際と1ページずれています。 「目次の更新」で「目次をすべて更新」を押しても反映されません。 また、ページをセクションで区切るなども特にしていません。 どうすれば正しいページ番号が目次に表示されるのでしょうか。 とても急いでいます。 よろしくお願いします。

  • 目次のページ番号が正しく表示されません。

    まったくの初心者です。 目次を作成しましたが、ページ番号が全部同じく6で表示されてしまいます（Ｔ＿Ｔ） すこしいじったら、「エラー！ブックマークが定義されていません」と。 どうも、ページ番号が認識されてないようです。 すごく困っています。どうしたらちゃんとした目次が作れますか？ 教えて下さい。お願いしますm(_ _)m

  • ワード　目次とページの付け方

    ワードで,目次をつけられるところまではいきました。 しかし,目次に,真ん中が章になりました。 ーーーーーーーーーーーーーーーーーーーーーーーーーーー 　　　　　　　　　　　第１章 第１節　・・・・ 第２節　・・・・ 　・ ーーーーーーーーーーーーーーーーーーーーーーーーーーー ２日前までは,下記のようでした。 ーーーーーーーーーーーーーーーーーーーーーーーーーーー 第１章 第１節 第２節 ーーーーーーーーーーーーーーーーーーーーーーーーーーー ２日前のように目次をしたいですが,うまくいきません。 また,２日前までは,ページ数もあっていましたが,今はページ数がずれています。直したいです。 現在,ワードの「牽引と目次」が,「見出し1」が真ん中になっています。どうしてでしょうか?「牽引と目次」の「見出し１」を左にしたいですが,どうしたらよいのか分かりません。教えてください。よろしくお願い致します。 左揃えの目次で,ページ番号が合っているようにするにはどうしたらよいでしょうか??? 教えてください。よろしくお願い致します。

  • WORD2007、目次の作成。

    WORD2007、目次の作成。 添付画像のように目次を作成したいですが、やりかたが分かりません。 普通（？）の目次の作成「参考資料」→「目次」のやり方は分かります。 しかし、添付画像のように、東京に関することでひとまとまり、大阪に関することでひとまとまり、という風に作成したいです。 初め東京、大阪をアウトラインレベル１にして、それ以下の項目をレベル２にしてやればいいかと思ったのですが、目次を作成したときに東京、大阪のところにページ番号が入ってしまいます。 東京、大阪は手入力でもいい（本分とリンクしていなくてもよい）ので、なにかいい方法ご存じありませんか？ ちなみに東京、大阪は通しのページ番号を使用したいです。 よろしくお願いします。

  • WORDの目次とヘッダー

    WORDの目次の自動作成機能についてなのですが、 見出し設定をして自動作製するのは出来るのですが、 その出力設定で質問があります。 見出し1～見出し3があるとして、 大項目の見出し1の目次にはページ番号をふらずに、 小項目の見出し2と3の目次にだけ見出しを付けたい場合、 どこの設定をどう変えればよいのでしょうか？ 目次には大項目も表示されて欲しいのですが、 同じページ番号が連続するとスマートな表示では ない気がするので質問しました。 またはそのような機能はついていないのでしょうか？ それからヘッダーについてです。 ページ範囲を限定して大項目名を挿入したいのです。 ひとつのフィルにいくつかの大項目があるのですが、 その大項目をそれぞれに振り分けるためにはどうすればよいでしょうか？

  • 【ワード】印刷プレビューにすると目次がずれる

    ワード2007で 参考資料→目次で目次を自動作成しています。 フィールドの更新の場合は目次はページ番号の通りに更新されますが、印刷プレビューで表示すると全て同じページで表示されます。 どなたか解決できないでしょうか。よろしくお願いします。

  • 奇数ページの連番設定による、目次のページ数の表示方法

    先日、奇数ページの連番の設定方法を教えていただきました。↓ http://okwave.jp/qa3074811.html その後、目次にフィールドを設定して、自動でページをふれるように したところ、奇数の連番でページ数が表示されません（涙） これを表示するには、どうすれば良いのでしょうか？ 教えてください（涙）

スノーピークの地元人気は？
このQ&Aのポイント
  • 三条市には全国的にも有名なスノーピーク社がありますが、同社の製品は地元の人にも人気ですか。
  • 三条市には人気のアウトドアブランド、スノーピーク社がありますが、地元の人々にも愛されていますか。
  • スノーピークは全国的に有名なブランドですが、地元の三条市でも人気を集めているのでしょうか。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する