質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

HTML

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

Q&A

解決済

2回答

2914閲覧

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

momocan

総合スコア13

JavaScript

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

jQuery

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

HTML

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

0グッド

1クリップ

投稿2019/06/12 16:00

編集2019/06/12 16:02

サムネイルをクリックするとメイン画像が切り替わるコードです。
メイン画像の横に、前の画像・次の画像に切り替える「<」「>」ボタンをつけたいです。

HTML

1<div class="mainimage"> 2 <img src="gazou01.jpg" alt="画像1"> 3</div> 4 <div class="thumbnail"> 5 <ul> 6 <li><img src="gazou01.jpg" alt="画像1"></li> 7 <li><img src="gazou02.jpg" alt="画像2"></li> 8 <li><img src="gazou03.jpg" alt="画像3"></li> 9 </ul> 10</div> 11 12<div class="mainimage"> 13<img src="gazou04.jpg" alt="画像4"> 14</div> 15 <div class="thumbnail"> 16 <ul> 17 <li><img src="gazou04.jpg" alt="画像5"></li> 18 <li><img src="gazou05.jpg" alt="画像6"></li> 19 <li><img src="gazou06.jpg" alt="画像7"></li> 20 </ul> 21</div>

JS

1<script> 2$(function(){ 3 $('.thumbnail img').on('click',function(){ 4 $(this).closest('.thumbnail').prev('.mainimage').find('img').attr({ 5 src:$(this).attr('src'), 6 alt:$(this).attr('alt'), 7 }); 8 }); 9}); 10</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2019/06/13 00:11

「やりたいです」じゃ「頑張って下さい」としか言えないので、 「ここまでできたのですがここの書き方がわかりません。」とか 「書いてみたのですがこういうエラーが出てしまいます。」とか もっと具体的に書きましょう
guest

回答2

0

ベストアンサー

そうなるとどのサムネイルが選ばれているかわかりづらくなるので
サムネイルにactiveクラスを付加したらどうでしょうか?

javascript

1<style> 2img.active{border:solid 1px blue;} 3</style> 4<script> 5$(function(){ 6 $('.mainimage img') 7 .before( 8 $('<span>&lt; </span>').on('click',function(){ 9 var tn=$(this).closest('.mainimage').next('.thumbnail').find('img'); 10 var idx=tn.index(tn.filter('.active')); 11 idx=0?(tn.length-1):(idx-1); 12 tn.eq(idx).trigger('click'); 13 }) 14 ).after( 15 $('<span> &gt;</span>').on('click',function(){ 16 var tn=$(this).closest('.mainimage').next('.thumbnail').find('img'); 17 var idx=tn.index(tn.filter('.active')); 18 idx=(tn.length-1==idx)?0:(idx+1); 19 tn.eq(idx).trigger('click'); 20 }) 21 ); 22 $('.thumbnail img').on('click',function(){ 23 $(this).closest('.thumbnail').prev('.mainimage').find('img').attr({ 24 src:$(this).attr('src'), 25 alt:$(this).attr('alt'), 26 }); 27 $(this).closest('ul').find('img').removeClass('active'); 28 $(this).addClass('active'); 29 }); 30 $('.thumbnail').each(function(){ 31 $(this).find('img').eq(0).trigger('click'); 32 }); 33}); 34</script> 35<div class="mainimage"> 36 <img src="gazou01.jpg" alt="画像1"> 37</div> 38 <div class="thumbnail"> 39 <ul> 40 <li><img src="gazou01.jpg" alt="画像1"></li> 41 <li><img src="gazou02.jpg" alt="画像2"></li> 42 <li><img src="gazou03.jpg" alt="画像3"></li> 43 </ul> 44</div> 45 46<div class="mainimage"> 47<img src="gazou04.jpg" alt="画像4"> 48</div> 49 <div class="thumbnail"> 50 <ul> 51 <li><img src="gazou04.jpg" alt="画像4"></li> 52 <li><img src="gazou05.jpg" alt="画像5"></li> 53 <li><img src="gazou06.jpg" alt="画像6"></li> 54 </ul> 55</div>

投稿2019/06/13 01:01

編集2019/06/13 01:02
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momocan

2019/06/13 06:21

回答ありがとうございます。理想通りの動作になりました。 ボタンとサムネイルをどのように連動させたらよいのかが分からず、出だしのところでつまづいていたので、本当に助かりました。回答していただいた内容をもとにもっと勉強します。
guest

0

How To Create Slideshow -w3school-

「画像スライダーのデモ」が分かりやすく解説されています。ページ右上の????をクリックすれば、丸々サイトを日本語翻訳して読めます。

何をどうすればいいか分からない時は、とりあえず出来るところまでもう少し詰めてみましょう。

  • まず、HTMLで「<」「>」ボタンをつけてみる
  • 具体的に必要な一連の処理を書き出してみる。例えば、

1.「>」ボタンクリック→
2. 右側の画像を正面に持ってくる
3. 画像を一行横並びにした要素が必要か? (=== スライダー)

↓↓スライダー作成後 ↓↓

‪• ‬画像を正面に持ってくる(スライダーを左にスライドさせる)には、まずスライダーのHTML要素(画像を横並びにしたHTML要素)を取得しないといけない

• ‬取得したが、jsでスライダー(HTML要素)を動かすにはどうすればいいか
‪• ‬検索

等です。ファイツ!!(๑⁼̴̀д⁼̴́๑)و✨

投稿2019/06/13 04:07

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

momocan

2019/06/13 06:14

回答ありがとうございます。 回答と貼っていただいた参考サイトを元に勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問