重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

画像の切り替え操作に悩んでいます。
複数のサムネイルから、同じページの固定場所に画像を拡大表示することは出来たのですが、
さらにサムネイルをクリックして変わった画像の位置から、
1.次へ、前へのリンクでも画像が切り替わる、
2.大きい画像のクリックでも画像が順に変わる。
ようにしたいと思っています。
今の時点では、現在大きく表示された画像がどのサムネイルの画像なのか、が認識されないため、順に表示することが出来ません。
よろしくお願いします。

A 回答 (1件)

ベタで工夫の欠片もないスクリプトですが


一応、要件は満たしているかと・・・
参考にして下さい。

<style>
img{
width:50px;
height:50px;
cursor:pointer;
}
</style>
<script>
var arr=new Array();
arr[0]="http://img.news.goo.ne.jp/talent/MW-W04-0221.jpg";
arr[1]="http://img.news.goo.ne.jp/talent/MW-W04-0222.jpg";
arr[2]="http://img.news.goo.ne.jp/talent/MW-W04-0223.jpg";
arr[3]="http://img.news.goo.ne.jp/talent/MW-W04-0226.jpg";
arr[4]="http://img.news.goo.ne.jp/talent/MW-W04-0227.jpg";
arr[5]="http://img.news.goo.ne.jp/talent/MW-W04-0230.jpg";
arr[6]="http://img.news.goo.ne.jp/talent/MW-W04-0231.jpg";
arr[7]="http://img.news.goo.ne.jp/talent/MW-W04-0232.jpg";
arr[8]="http://img.news.goo.ne.jp/talent/MW-W04-0233.jpg";
arr[9]="http://img.news.goo.ne.jp/talent/MW-W04-0234.jpg";

var cnt=0;

function show(num){
document.images["photo"].src=arr[num];
cnt=num;
}

function next(){
cnt+=1;
if(cnt>9)cnt=0;
document.images["photo"].src=arr[cnt];
}

function prev(){
cnt-=1;
if(cnt<0)cnt=9;
document.images["photo"].src=arr[cnt];
}
</script>
<body>
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0221.jpg" onclick="show(0)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0222.jpg" onclick="show(1)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0223.jpg" onclick="show(2)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0226.jpg" onclick="show(3)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0227.jpg" onclick="show(4)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0230.jpg" onclick="show(5)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0231.jpg" onclick="show(6)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0232.jpg" onclick="show(7)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0233.jpg" onclick="show(8)" />
<img src="http://img.news.goo.ne.jp/talent/MW-W04-0234.jpg" onclick="show(9)" /><br>
<img name="photo" src="http://img.news.goo.ne.jp/talent/MW-W04-0221.jpg" style="width:200px;height:200px;" onclick="next()" /><br>
<input type="button" value="次へ" onclick="next()" style="width:100px;" />
<input type="button" value="前へ" onclick="prev()" style="width:100px;" />
</body>






.
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!