質問編集履歴

1 コードの修整

momocan score 13

2019/06/13 01:02  投稿

サムネイルクリックで画像を切り替え、「next」と「prev」ボタンを追加したい

サムネイルをクリックするとメイン画像が切り替わるコードです。

メイン画像の横に、前の画像・次の画像に切り替える「＜」「＞」ボタンをつけたいです。

```HTML

<div class="mainimage">

<img src="gazou01.jpg" alt="画像１">

<img src="gazou01.jpg" alt="画像１">

</div>

<div class="thumbnail">

<img src="gazou01.jpg" alt="画像１">

<img src="gazou02.jpg" alt="画像２">

<img src="gazou03.jpg" alt="画像３">

<ul>

<li><img src="gazou01.jpg" alt="画像１"></li>

<li><img src="gazou02.jpg" alt="画像２"></li>

<li><img src="gazou03.jpg" alt="画像３"></li>

</ul>

</div>

<div class="mainimage">

<img src="gazou04.jpg" alt="画像４">

</div>

<div class="thumbnail">

<img src="gazou04.jpg" alt="画像５">

<img src="gazou05.jpg" alt="画像６">

<img src="gazou06.jpg" alt="画像７">

<ul>

<li><img src="gazou04.jpg" alt="画像５"></li>

<li><img src="gazou05.jpg" alt="画像６"></li>

<li><img src="gazou06.jpg" alt="画像７"></li>

</ul>

</div>

```

```JS

<script>

$(function(){

$('.thumbnail img').on('click',function(){

$(this).closest('.thumbnail').prev('.mainimage').find('img').attr({

src:$(this).attr('src'),

alt:$(this).attr('alt'),

});

});

});

</script>

```

JavaScript 29428 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 HTML 18187 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 jQuery 11244 questions jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 Myタグに追加