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

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

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

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

Q&A

解決済

2回答

1245閲覧

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

kakedashi009

総合スコア5

JavaScript

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

0グッド

1クリップ

投稿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

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

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

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

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

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

guest

回答2

0

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

投稿2020/08/09 13:05

miyabi_takatsuk

総合スコア9528

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

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

0

ベストアンサー

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

Javascript

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

投稿2020/08/09 14:00

Jon_do

総合スコア1373

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

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

kakedashi009

2020/08/09 15:19

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

2020/08/09 18:53

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問