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

締切済

質問者：wpc_suzumeya
質問日時：2013/08/27 03:01
回答数：2件

目次のページに春・夏・秋・冬と項目があり、「夏」を選ぶと、
「夏」のフォルダ（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の間は「次へ」と「前へ」の両方が表示されるようにと言うのは出来ますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： LancerVII
回答日時：2013/08/28 07:43

こんにちは。

サンプルをどうぞってURL貼ったら削除され、もうその方法は出来ないようなので以下に全文貼ります。
内容見てみてわからなかったら補足下さい。

<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8" />
<title>【OKWave回答サンプル集】連番画像「次へ」「前へ」で、目次に戻るには</title>
<link rel="stylesheet" href="/okwave/qa/css/basic.css" />

<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>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2013/08/27 11:15

＞「前へ」や、「次へ」で目次のページに戻ることはできますか？

できます。

＞natu1.jpgの時には「次へ」だけ、V10.jpgの時は「前へ」だけ表示されるようにと言うのは出来ますか？
できます。

前者は、ご参考にしているスクリプトで次に表示する番号が0や11になっていたら1や10に修正しているところを、目次を表示するように変えてあげればよろしいかと。

後者は、似たような条件分岐を作成し、各ボタンの表示/非表示を制御するようにしてあげればよろしいでしょう。