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

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

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

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

解決済

JavaScriptにてスマホ版とPC版で別の順番になる背景画像のスライドショーを作成したい

kakedashi009
kakedashi009

総合スコア5

JavaScript

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

2回答

0グッド

1クリップ

1072閲覧

投稿2020/08/09 12:41

タイトルのようなスライドショーを作るために配列を2つ用意し、それぞれのスマホ版とPC版で異なる画像を使った上で順番を配列内で変えて処理させようとしたのですが、順番通りに動かないどころかインデックスの0と2を行き来するような表示になってしまうのですが、これは何が原因なのでしょうか?
また、どっちか片方の処理だけを記述すれば正常に機能するため、何かがお互いに干渉しあっているとは思うのですが、仮説すら立てられず困っているので、ご教授願いたいです。

JavaScript

1/ スライドショー関連 2// 宣言 3const images =[ 4 'img/image05.png', 5 'img/image01.png', 6 'img/image06.png', 7 'img/image02.png', 8 'img/image04.png', 9 'img/image03.png' 10]; 11const spImages =[ 12 'img/spimage03.png', 13 'img/spimage01.png', 14 'img/spimage04.png', 15 'img/spimage02.png' 16] 17let counter =0; 18const mainImage =document.getElementById('mainImage'); 19const spImage =document.getElementById('spImage'); 20// ページがロードされた際に行うイベント 21window.addEventListener('load' , function slideChange(){ 22 if (counter == images.length-1){ // 最後の画像まで表示したのなら 23 counter=0; // 最初の画像に戻す 24 mainImage.classList.add('fadein-out'); 25 setInterval(() => { 26 mainImage.classList.remove('fadein-out') 27 }, 1000); 28 } 29 else{ // 最後の画像まで表示していないのなら 30 counter++; // 次の画像へ 31 mainImage.classList.add('fadein-out'); 32 setInterval(() => { 33 mainImage.classList.remove('fadein-out') 34 }, 1000); 35 } 36 setTimeout( slideChange , 3000); // 10秒周期に画像を更新する 37 mainImage.src = images[counter]; // 次の画像を表示する 38}); 39// スマホ版の処理 40window.addEventListener('load' , function slideChange2(){ // 定期的に画像を更新する関数 41 if (counter == spImages.length-1){ // 最後の画像まで表示したのなら 42 counter=0; // 最初の画像に戻す 43 spImage.classList.add('fadein-out'); 44 setInterval(() => { 45 spImage.classList.remove('fadein-out') 46 }, 1000); 47 } 48 else{ // 最後の画像まで表示していないのなら 49 counter++; // 次の画像へ 50 spImage.classList.add('fadein-out'); 51 setInterval(() => { 52 spImage.classList.remove('fadein-out') 53 }, 1000); 54 } 55 setTimeout( slideChange2 , 3000); // 10秒周期に画像を更新する 56 spImage.src = spImages[counter]; // 次の画像を表示する ) 57 }); 58 59 60 61 62

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2020/08/09 13:41

こちらの質問が複数のユーザーから「過去の低評価」という指摘を受けました。

回答2

3

単純に、PC版とスマホ版の関数が、同時に実行されてしまう構文だからです。
PCならば、slideChange、スマホならslideChange2を実行するようにすれば、うまく行くかと。
addEventListenerは読んで字の如く、
処理を追加するメソッドのため、今回のような重複処理が起きるのかと。

投稿2020/08/09 13:05

miyabi_takatsuk

総合スコア9398

kakedashi009, Jon_do, kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2

ベストアンサー

下記のように処理を分ければいいと思います。
スマホかどうかは画面サイズを取得して判定できます。

Javascript

1if(スマホ){ 2 // スマホでの処理 3} else { 4 // スマホ以外で行いたい処理 5}

投稿2020/08/09 14:00

Jon_do

総合スコア1371

miyabi_takatsuk, mi_👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kakedashi009

2020/08/09 15:19

ありがとうございます。 同じような発送でmatchmadiaメソッドを使って実現することができました。
miyabi_takatsuk

2020/08/09 18:53

画面サイズだけの判別だと、 高解像度のスマホの振り分けが難しくなりますので、 ユーザーエージェントでの振り分けの方がいいかと思います。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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