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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

1回答

521閲覧

画像切り替えスライダーを実装 (JSのeach、lengthに関して)

yourai

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2020/12/01 08:38

JSとcssを使って画像が切り替わるスライダーを実装しています。
現在の書き方だと、スライダーのdiv.wrapを複製した場合、.imgの数を数えてしまうことにより
スライダーそれぞれが同時にスライドせず、順番にスライドしてしまいます。
これを、div.wrapが何個あっても同時にスライドさせるように書き換えたいのですが、、
分かる方いらっしゃいましたらご教示お願いいたします。
※現在は画像ではなく仮でbackground-colorにしています。

HTML

1<div id="container"> 2 <div class="wrap"> 3 <div class="img"></div> 4 <div class="img"></div> 5 <div class="img"></div> 6 <div class="img"></div> 7 <div class="img"></div> 8 </div> 9 10 <div class="wrap"> 11 <div class="img"></div> 12 <div class="img"></div> 13 <div class="img"></div> 14 <div class="img"></div> 15 <div class="img"></div> 16 </div> 17</div>

CSS

1#container { 2 display: flex; 3} 4 5.wrap { 6 width: 50%; 7 position: relative; 8} 9 10.img { 11 width: 200px; 12 height: 200px; 13 background-color: #000; 14 position: absolute; 15 top: 0; 16 left: 0; 17 z-index: 1; 18 overflow: hidden; 19} 20 21.img.active { 22 z-index: 3 !important; 23 animation: slideNext 1s linear 0s forwards; 24 } 25 26.img.out { 27 z-index: 2; 28} 29 30@keyframes slideNext { 31 0% { 32 -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); 33 clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); 34 } 35 100% { 36 -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); 37 clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); 38 } 39} 40 41.img:nth-of-type(1) { 42 background-color: #333; 43} 44 45.img:nth-of-type(2) { 46 background-color: #444; 47} 48 49.img:nth-of-type(3) { 50 background-color: #555; 51} 52 53.img:nth-of-type(4) { 54 background-color: #666; 55} 56 57.img:nth-of-type(5) { 58 background-color: #777; 59}

javascript

1$(window).on('load', function() { 2 3 $('.wrap > .img:first').addClass('active out'); 4 5 var fade_image01 = $('.wrap > .img'); 6 var fade_time = 4000; 7 8 if (fade_image01.length) { 9 10 var current = 0; 11 var old = 0; 12 var next = 1; 13 14 setInterval(function() { 15 16 old = current; 17 current = current === fade_image01.length - 1 ? 0 : current + 1; 18 //console.log(current); 19 next = next === fade_image01.length - 1 ? 0 : next + 1; 20 21 22 fade_image01.eq(current).addClass('active out'); 23 fade_image01.eq(old).removeClass('active'); 24 25 setTimeout(function() { 26 fade_image01.eq(old).removeClass('out'); 27 }, 2000); 28 29 }, fade_time); 30 } 31 });

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

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

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

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

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

kei344

2020/12/02 06:59

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

こんばんは。

.each()とコンテクストを使ってはいかがでしょうか。

サンプル

js

1$(window).on('load', function () { 2 $('.wrap').each(function(i,e){ // 追加 3 4 $('.img:first', e).addClass('active out'); // 変更 5 6 var fade_image01 = $('.img', e); // 変更 7//... 8 }); // 追加 9 10});

jQuery的にはthisを使うのがお作法なのかもしれませんが……


参考:
.each() | jQuery API Documentation
jQuery() | jQuery API Documentation

投稿2020/12/01 09:44

Lhankor_Mhy

総合スコア35869

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

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

yourai

2020/12/02 01:34

ご回答ありがとうございます。 すんなり解決してしましました、、! thisでも動作の確認ができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問