目次のページに春・夏・秋・冬と項目があり、「夏」を選ぶと、
「夏」のフォルダ(natu1.jpgからnatu10.jpgまでの画像が入っています)のnatu1.jpg が表示され、
「次へ」を押すと次の番号の画像、「前へ」を押すと前の番号の画像へ戻るようにしたいと思い、
こちらを参考に http://oshiete.goo.ne.jp/qa/1905352.html できたのですが、
natu1.jpgが表示されている時の、「前へ」や、natu10.jpgが表示されている時の「次へ」で
目次のページに戻ることはできますか?
もしくはnatu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ、natu2.jpg ~ natu9.jpgの間は「次へ」と「前へ」の両方が表示されるようにと言うのは出来ますか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
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 -->
No.1
- 回答日時:
>「前へ」や、「次へ」で目次のページに戻ることはできますか?
できます。
>natu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ表示されるようにと言うのは出来ますか?
できます。
前者は、ご参考にしているスクリプトで次に表示する番号が0や11になっていたら1や10に修正しているところを、目次を表示するように変えてあげればよろしいかと。
後者は、似たような条件分岐を作成し、各ボタンの表示/非表示を制御するようにしてあげればよろしいでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- Excel(エクセル) Excel 毎日手作業で時間がかかって、泣きたいです、、、VBAのプロの方、助けてください。。。 3 2022/10/25 04:26
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- その他(コンピューター・テクノロジー) エクスプローラでファイルが開かない 4 2022/11/10 07:32
- Illustrator(イラストレーター) 印刷プレビューに画像が表示されない 3 2022/09/06 14:34
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで画像を重ねる
-
FirefoxでonMouseOver/Outの動...
-
画像の座標位置取得
-
imgのsrcに値を設定するには
-
マウスを当てると、サイコロの...
-
商品回転画像の作成方法
-
this.src等のthisについて
-
このスクリプトで画像クリック...
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
jqueryのsortableで一部ソート...
-
iframe内のリンクが飛ばないの...
-
Lightbox2でのキャプションにつ...
-
画像ファイルの合成
-
クリックで背景変更するタグ
-
【OpenCV】二値画像後、白の部...
-
「jQuery」アコーディオンメニ...
-
チェックボックスと画像切替の連動
-
high slideをFC2ブログで
-
どの<li><a> が押されたか判別...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の座標位置取得
-
window.openで値の渡し方を教え...
-
画像と文字を同時に切り替えたい
-
jQueryで画像を重ねる
-
this.src等のthisについて
-
画像の下に説明文をつけて切り...
-
画像をクリックすると別ウイン...
-
JAVAで画像をボタンで切り替え...
-
jQueryでサーバー上のファイル...
-
画像アップロードしたい
-
クリックで次の画像へ
-
画像をクリックして変数に値を代入
-
複数の画像の中から複数の画像...
-
imgのsrcに値を設定するには
-
スマートな外部javaでロールオ...
-
複数のバナーをリロードする度...
-
divの背景画像を、徐々に表示さ...
-
タイマーをデジタル時計風にす...
-
アンケート型のホームページの...
-
一定時間で画像を変更するスク...
おすすめ情報