← →クリックで前後できるスライドショー

質問

現在、下記のJavaでスライドショーを使っているのですが、写真が前後出来ません。
スクリプトに改良を加えることによって、← →で前後移動できるようにする方法はありますか?また、写真ごとに、左下にキャプションを付けられるようになるとより良いのですが。
初心者で四苦八苦してる状態です。よろしくお願いします。
ちなみに、スライドショーはこんな感じです。
http://www.shinmiura.com/main/Shin_Miura___Portrait.html

<Div Align="center"><a href="#" onclick="parapara();return false;">
<img src=http://www.shinmiura.com/image/poartrait/1_1.jpg name=name border=0>

<script language=javascript>
<!--
if(navigator.appVersion.charAt(0) >=4) {
var paraImg= new Array();

paraImg[0] = new Image(); paraImg[0].src = "http://www.shinmiura.com/image/poartrait/1_1.jpg";
paraImg[1] = new Image(); paraImg[1].src = "http://www.shinmiura.com/image/poartrait/1_2.jpg";
paraImg[2] = new Image(); paraImg[2].src = "http://www.shinmiura.com/image/poartrait/1_3.jpg";
paraImg[3] = new Image(); paraImg[3].src = "http://www.shinmiura.com/image/poartrait/1_4.jpg";
paraImg[4] = new Image(); paraImg[4].src = "http://www.shinmiura.com/image/poartrait/2_1.jpg";
paraImg[5] = new Image(); paraImg[5].src = "http://www.shinmiura.com/image/poartrait/2_2.jpg";
paraImg[6] = new Image(); paraImg[6].src = "http://www.shinmiura.com/image/poartrait/2_3.jpg";
paraImg[7] = new Image(); paraImg[7].src = "http://www.shinmiura.com/image/poartrait/2_4.jpg";
paraImg[8] = new Image(); paraImg[8].src = "http://www.shinmiura.com/image/poartrait/2_5.jpg";
}
var paraCount = 0;
function parapara() {
if(paraCount < paraImg.length-1) {
paraCount++;
} else {
paraCount = 0;
}
document.images["name"].src = paraImg[paraCount].src;
}
//-->
</script></Div>

回答No.1

mtmt1984 · ベストアンサー

javaじゃなくてjavascriptですよね？
ようするにこういう感じのサイトのことですか？
h　ttp://web-park.org/javascript/slide_gallery100421/
↑でしたら、
h　ttp://web-park.org/javascript/easyslidegallery100421.html
ここでソースをダウンロードできるのですごく楽だと思います。

左下にキャプション？
画像の中の左下？それとも画像の外の左下？
ツールチップや噴出しって単語で検索してみてもいいかもね。
それとも、画像の上に文字を表示させたいという意味かな？
画像の上に文字を表示させたいならここのサイトが約にたつかも。
h　ttp://kisetu.chu.jp/hint/bord.html

補足

情報提供、ありがとうございます。色々とやってみましたが、写真が重なり何故か動きません。MacのiWeb上で作っているので上手く動かないのかもしれません。

回答No.3

yyr446

そのまんま貼り付けでどうだ。
<script type="text/javascript">
//--------上は同じ--------------------
var paraCount = 0;
function parapara(key){
if(paraCount < paraImg.length-1)
if(paraCount < 0) paraCount = paraImg.length-1;
else paraCount += key;
else paraCount = 0;
document.images["name"].src = paraImg[paraCount].src;
}
document.onkeydown = function(e){
var code = e?e.keyCode:window.event.keyCode;
if(code=="37") parapara(-1); //←
if(code=="39") parapara(1); //→
}
</script>

お礼

そのまんま貼りつけてみましたがどうもうまくいかないようです。
もう一度基礎を学んでから出直します。
ありがとうございました。

回答No.2

noris02

試してませんが、
function parapara() の中身を少しかえて
引数で ±を。
function parapara(key) {
　if(paraCount < paraImg.length-1) {
　　paraCount+=key;
　　・・・

渡す 引数は -1 か +1
paraCountが0以下になった時の処理をいれておく。

imgをクリックした際は今までどおりにする
<a href="#" onclick="parapara(1);return false;">
()に引数を　入れておく
に、しておいて

window.document.onkeydown = function(){
if (event.keyCode == 【→キーのキーコード】){
parapara(1);
}
if (event.keyCode == 【←キーのキーコード】){
parapara(-1);
}
}
では 無理ですか？

お礼

情報提供、ありがとうございます。私に文章力に弱いのか全くJavaScriptに無知なのかわかりませんが、回答のとおりにやってみてもうまく動きませんでした。