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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

511閲覧

CSSスライダーの表示画像と、連動する画像の作り方

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/26 23:33

###目的
スライダーで表示している画像と連動して、同じ画像を別の場所に表示させたいです。

###現状
このようなスライダーがあります。
https://jsfiddle.net/bbc1knka/

上のスライダーのコードは下記です。

html

1<!-- 【スライダー】 --> 2<p>▼▼クリックで画像がスライドします。▼▼</p> 3<div class="slider"> 4 5 <input type="radio" name="radio_slider" id="radio_slider1" value="1" checked> 6 <input type="radio" name="radio_slider" id="radio_slider2" value="2"> 7 <input type="radio" name="radio_slider" id="radio_slider3" value="3"> 8 9 <div class="inner_slider"> 10 <label for="radio_slider2"><img src="http://bit.ly/2sNLCTb" class="img1"></label> 11 <label for="radio_slider3"><img src="http://bit.ly/2FtAkX4" class="img2"></label> 12 <label for="radio_slider1"><img src="http://bit.ly/2FrhxLM" class="img3"></label> 13 </div> 14 15</div> 16 17<!-- 【連動画像】 --> 18<p>▼▼ここに画像を連動して表示させたい。▼▼</p> 19<div class="linkimg"> 20<img src="選択中の画像URL?" class="link"> 21</div>

css

1/* 【スライダー】 */ 2.slider { 3width: 200px; 4height: 150px; 5overflow: hidden; 6} 7.img1 { 8position: absolute; 9left: 0; 10top: 0; 11} 12.img2 { 13position: absolute; 14left: 200px; 15top: 0; 16} 17.img3 { 18position: absolute; 19left: 400px; 20top: 0; 21} 22.img4 { 23position: absolute; 24left: 600px; 25top: 0; 26} 27 28.inner_slider { 29position: relative; 30width: 800px; 31left: 0; 32top: 0; 33transition: all .3s ease-in-out; 34} 35.inner_slider > img { 36 width: inherit; 37 height: inherit; 38 object-fit: contain; 39} 40 41#radio_slider1:checked ~ .inner_slider { 42transform: translateX(0); 43} 44#radio_slider2:checked ~ .inner_slider { 45transform: translateX(-200px); 46} 47#radio_slider3:checked ~ .inner_slider { 48transform: translateX(-400px); 49} 50#radio_slider4:checked ~ .inner_slider { 51transform: translateX(-600px); 52}

###■難しいところ
ただし、【スライダー】の部分のHTMLの構造は変えずに、javascriptかCSSのみで、【連動画像】を連動させたいのです。

そのようなことはできますでしょうか?

css、javascriptにお詳しい方、どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

JavaScript

1var innerSlider = document.querySelector("div.inner_slider"); 2var preview = document.querySelector("div.linkimg img"); 3document.querySelectorAll("input[name=radio_slider]").forEach(function(radio) { 4 radio.addEventListener("click", function() { 5 var src = innerSlider.querySelector("img.img" + radio.value).src; 6 preview.src = src; 7 }); 8});

追記

JavaScript

1var innerSlider = document.querySelector("div.inner_slider"); 2var preview = document.querySelector("div.linkimg img"); 3document.querySelectorAll("input[name=radio_slider]").forEach(function(radio) { 4 radio.addEventListener("click", function() { 5 var src = innerSlider.querySelector("img.img" + radio.value).src; 6 preview.src = src; 7 }); 8 if (radio.checked) { 9 radio.click(); 10 } 11}); 12

投稿2018/02/27 01:33

編集2018/02/27 03:29
root_jp

総合スコア4666

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

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

退会済みユーザー

退会済みユーザー

2018/02/27 01:51

おお。まさにこれでございます。まことにありがとうございます! 大変僭越で誠に恐縮ながら、あえて欲を言わせて頂きますと、画面ロード時にすでに連動がしているようですと、うれしいかったです☆ window.onload = function() { ここに書く }; をやってみたのですが、できませんでした。。
jun68ykt

2018/02/27 02:17

横から大変失礼いたします。 ご質問にある jsFiddle と、root_jp さんのコードをお借りして、 >画面ロード時にすでに連動 しているようにしました。 以下です。 https://jsfiddle.net/jun68ykt/bbc1knka/42/
退会済みユーザー

退会済みユーザー

2018/02/27 02:56

jun68yktさん、いつもありがとうございます!! あえて横から追記して手柄を人にあげちゃうあたり、素敵な人格が垣間見えますね!星のリゾートの星野さんみたいです。笑 root_jpさんもどうもありがとうございます。 せっかくご回答いただいたのに追加ですみませんでした。
root_jp

2018/02/27 03:29

追記しました。
退会済みユーザー

退会済みユーザー

2018/02/27 04:08 編集

root_jpさん、追記ありがとうございます!
退会済みユーザー

退会済みユーザー

2018/02/27 04:08 編集

root_jpさん、追記ありがとうございます!
guest

0

”【連動画像】を連動させる”というのは、
<img src="選択中の画像URL?" class="link"><div class="inner_slider">内の要素と、全く同じ表示にするという事でしょうか?

でしたら、スライダーの動きは全てクラスで指定されていますから、
jQueryのcloneで複製すれば良いのではないでしょうか?
jQuery リファレンス:clone

投稿2018/02/27 00:23

sunegex

総合スコア49

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

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

退会済みユーザー

退会済みユーザー

2018/02/27 02:00

ありがとうございます。 >全く同じ表示にするという事 ではなく、 選択中の画像を1つだけ表示する ということです。 でも、cloneもとっても便利ですね。ご指導感謝です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問