javascript素人なので詳しく教えて頂きたいと思います。

質問

javascript素人なので詳しく教えて頂きたいと思います。

サイトリニューアルに伴い、以下の仕様に変えたいと思っています。
このスクリプト自体他の人が作ったものなのでよく理解できていません。。

以下ページにある「前の写真へ」「次の写真へ」のボタンをクリックするとサムネイルの枠線が移動し、
且つ、メインの大きい写真が変わるスクリプトを使用しています。

http://www.all-eyefulhomenavi.com/kamimura/urawa/example/0017/index.html

【現在のJavascriptの仕様】
A-E（5つ）の画像が切り替えられる仕様

「次へ」の仕様を実現するために、現在の仕様になっているのだと思いますが、
今の仕様ですと点数をきっちりいれないとエラーになるため、修正をしたいと思っています。

【新仕様】
(1)画像点数は1～点数制限なしで対応した切り替え記述

(2)a,b,c,dなど画像に番号をつけるのではなく1,2,3,4で番号をつける。

よろしくお願いします。

回答No.2

fujillin · ベストアンサー

#1です。
スクリプトをちゃんと見てはいませんが・・・、ご自分で修正するのなら以下のようなことも参考にしてください。

仮に、使用するスライドを1～ｎ（ｎは可変）として、現在表示しているスライド番号をPN（デフォルト時は1）などと仮定しておきましょう。
最初に、n（スライドの総数）をどのように受け渡すかについてですが、HTML側の記述を簡単にするなら、スクリプト側で、始めに一度HTML内のスライド数を数えるルーチンを実行しておくとかの方法もありますし、それが面倒ならHTML内に直接 n=**； のように記述して定義してしまうとか・・・

例えば、表示する次の番号や前の番号について言えば、ケース分けで記述しているとnが大きくなった時に面倒ですし、この方法では、そもそもｎの可変性の確保が難しいですね。
function next(p){
　　next = (p % n) + 1;
}
function prev(p){
　　prev = (p + n - 2) % n + 1;
}
などというように一般化しておいて、next(PN)といった使い方をすることでｎの可変性を保持できます。
（スライド番号を 0～n-1 にしておいたほうが計算式は簡単になりますが）

総数を可変にするためにスクリプト全体をそれに応じて修正することになるので、結局、全体を0から作り直しても大差ないでしょうという意味でした。
要領良く記述すれば、半分以下ぐらいの行数にできるかも・・・
頑張ってください。

お礼

＞fujillin様
ご回答ありがとうございます。

function next(p){
　　next = (p % n) + 1;
}
function prev(p){
　　prev = (p + n - 2) % n + 1;
}

なるほど、こういう記述方法もあるのですね。。
勉強になります。
今夜、実装に向けて作業するので試してみます。
取り急ぎ、よろしくお願いします。

回答No.1

fujillin

全体のボリュームからして一部修正というよりも、ほとんど全部修正なので、新しく作っても変わらないようです。
ただ、jsファイルの置いてある位置が、かなり上位のcommonディレクトリなので、他のHPで使用していたりする可能性もあるので、直接変更しないで（残しておいて）新しいjsファイルを作ってアップロードした方がよさそうです。（きちんと、使用範囲がわかっていらっしゃる場合は、いらぬお世話ですが・・・）

「素人」とのことですので、自分で作成しなくても目的にあったスクリプトが用意されていることも多いので、そういうものを利用するのも一つの方法です。
「JavaScript」「スライドショー」などをキーワードに検索するといろいろ見つかると思います。
一例を・・・　http://www.moongift.jp/2007/09/slideshow/

お礼

新しく作っても良いのですが、元のJSファイルを踏襲して
時間を掛けずにアップグレードできないものかと考えておりました。
色々検索してみたいと思います。
ご回答ありがとうございました。

補足

以下が今回のコードになります。
上記サンプルから数字に変えています。

==================================================
<script language=”JavaScript”><!--

//function of change image
var blue = "1";
var next = "2";
var prev = "8";

function change(clickImg,NP) {
//case of click arrow
if(NP=="next") {
switch(next) {
case "1" : next = "2"; prev = "8"; break;
case "2" : next = "3"; prev = "1"; break;
case "3" : next = "4"; prev = "2"; break;
case "4" : next = "5"; prev = "3"; break;
case "5" : next = "6"; prev = "4"; break;
case "6" : next = "7"; prev = "5"; break;
case "7" : next = "8"; prev = "6"; break;
case "8" : next = "1"; prev = "7"; break;
}
} else if(NP=="prev") {
switch(prev) {
case "1" : next = "2"; prev = "8"; break;
case "2" : next = "3"; prev = "1"; break;
case "3" : next = "4"; prev = "2"; break;
case "4" : next = "5"; prev = "3"; break;
case "5" : next = "6"; prev = "4"; break;
case "6" : next = "7"; prev = "5"; break;
case "7" : next = "8"; prev = "6"; break;
case "8" : next = "1"; prev = "7"; break;
}
}
//case of click sumbnail
switch(clickImg) {
case "1" : next = "2"; prev = "8"; break;
case "2" : next = "3"; prev = "1"; break;
case "3" : next = "4"; prev = "2"; break;
case "4" : next = "5"; prev = "3"; break;
case "5" : next = "6"; prev = "4"; break;
case "6" : next = "7"; prev = "5"; break;
case "7" : next = "8"; prev = "6"; break;
case "8" : next = "1"; prev = "7"; break;
default : break ;
}

//boder color change
os = navigator.userAgent.toUpperCase();
str = navigator.appName.toUpperCase();
if ( os.indexOf("WIN") >= 0 && str.indexOf("EXPLORER") >= 0) {//Case of Win IE
document.images[blue].style.setAttribute("border","#FFFFFF solid 1px;");
document.images[clickImg].style.setAttribute("border","#0099FF solid 1px;");
} else {//Case of Other UA
document.images[blue].setAttribute("style","border:#FFFFFF solid 1px;");
document.images[clickImg].setAttribute("style","border:#0099FF solid 1px;");
}

//main image change
document.images["main"].src = "/common/images/tenpo/" + clickImg + ".jpg";

blue = clickImg;

}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

// --></script>

<!-- main img -->
<p class="W349"><img src="/common/images/tenpo/1.jpg" alt="" name="main" width="349" height="272" id="main" /></p>

<!-- change btn -->
<p class="next"><a href="javascript:void(0)" onmousedown="change(next,'next')">次へ</a></p>
<p class="prev"><a href="javascript:void(0)" onmousedown="change(prev,'prev')">前へ</a></p>

<!-- sumbnail -->
<a href="javascript:void(0)" onmousedown="change('1','')" onmouseover="MM_swapImage('1','','/common/images/tenpo/sum_1_o.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="/common/images/tenpo/sum_1.jpg" alt="" name="1" width="57" height="57" border="0" id="1" style="border:#0099FF solid 1px;" /></a>