A 回答 (1件)
- 最新から表示
- 回答順に表示
No.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>
.
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- フリーソフト 倍率自動調整して全画面表示できるフリーの画像ビューアー 1 2023/08/24 10:55
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のフェードイン・フェード...
-
デフォルト非表示にしたい。【t...
-
IMGタグごとにCSSを設定する方法
-
bxsliderで最初に縦に複数表示...
-
画像マウスオーバーで、checkb...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
javascriptでフォーカスを当て...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
-
外部javascriptの重複を防ぐには
-
クリックすると下に説明文が出...
-
YouTubeをブログに貼る時、1つ...
-
リンク色を動的に変更したい。i...
-
離れた場所にマウスオーバーで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
デフォルト非表示にしたい。【t...
-
スクリプト
-
jQueryで4枚の画像がフェードア...
-
交互に入れ替わる画像を複数配置
-
クリッカブルマップをロールオ...
-
bxsliderで最初に縦に複数表示...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
「画像クリックで音声再生」を ...
-
画像切り替え
-
ボタンを押すたびに交互に切り...
-
jQuery 親要素の大きさに合わせ...
-
画像のフェードインについて・...
-
ボタンを画像に変更したい
-
画像のフェードイン・フェード...
-
アップロードファイルの種類に...
-
クリックでクリッカブルマップ...
-
Jquery cheeckbox(複数)とsli...
-
画像の切り替えについて
おすすめ情報
