質問編集履歴

1 コードの修整

momocan

momocan score 5

2019/06/13 01:02  投稿

サムネイルクリックで画像を切り替え、「next」と「prev」ボタンを追加したい
サムネイルをクリックするとメイン画像が切り替わるコードです。
メイン画像の横に、前の画像・次の画像に切り替える「<」「>」ボタンをつけたいです。
```HTML
<div class="mainimage">
<img src="gazou01.jpg" alt="画像1">
<img src="gazou01.jpg" alt="画像1">
</div>
<div class="thumbnail">
<img src="gazou01.jpg" alt="画像1">
<img src="gazou02.jpg" alt="画像2">
<img src="gazou03.jpg" alt="画像3">
<ul>
<li><img src="gazou01.jpg" alt="画像1"></li>
<li><img src="gazou02.jpg" alt="画像2"></li>
<li><img src="gazou03.jpg" alt="画像3"></li>
</ul>
</div>
<div class="mainimage">
<img src="gazou04.jpg" alt="画像4">
</div>
<div class="thumbnail">
<img src="gazou04.jpg" alt="画像5">
<img src="gazou05.jpg" alt="画像6">
<img src="gazou06.jpg" alt="画像7">
<ul>
<li><img src="gazou04.jpg" alt="画像5"></li>
<li><img src="gazou05.jpg" alt="画像6"></li>
<li><img src="gazou06.jpg" alt="画像7"></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

    21543 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    12236 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8566 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る