JavaScriptにて、スマホ版とPC版を分けてスライドショーを作りたい

Question

現在スライドショーを作ろうとしているのですが、JavaScriptに２つスライドショーの処理を記述し、それぞれで分けてスライドショーを作りたいと思っています。
スライドショーはwebページの背景画像に用いるためのもので、それぞれで違う画像を用いたいために２つ処理をJavaScriptにて記述したのですが、動かない上に仮説も立てることもできず困っています。
後半のスマホ版の処理をコメントアウトするとPC版としている方の記述は動くのですが、これは何が原因で動かないのでしょうか？

// スライドショー関連
// 宣言
const images =[
  'img/image05.png',
  'img/image01.png',
  'img/image06.png',
  'img/image02.png',
  'img/image04.png',
  'img/image03.png',
];
const spImages =[
  'spimage01.png',
  'spimage02.png',
  'spimage03.png',
  'spimage04.png',
]
let counter =0;
const mainImage =document.getElementById('mainImage');
const spImage =document.getElementById('spImage');
// ページがロードされた際に行うイベント
window.onload=function slideChange(){	// 定期的に画像を更新する関数
  if (counter == images.length-1){	// 最後の画像まで表示したのなら
      counter=0;	// 最初の画像に戻す
      mainImage.classList.add('fadein-out');
      setInterval(() => {
        mainImage.classList.remove('fadein-out')
      }, 2000);
    }
    else{	// 最後の画像まで表示していないのなら
      counter++;	// 次の画像へ
      mainImage.classList.add('fadein-out');
      setInterval(() => {
        mainImage.classList.remove('fadein-out')
      }, 2000);
    }	
    setTimeout( slideChange , 10000);	// 10秒周期に画像を更新する
    mainImage.src = images[counter];	// 次の画像を表示する
};
// スマホ版の処理
window.onload=function slideChange2(){	// 定期的に画像を更新する関数
  if (counter == spImages.length-1){	// 最後の画像まで表示したのなら
      counter=0;	// 最初の画像に戻す
      spImage.classList.add('fadein-out');
      setInterval(() => {
        spImage.classList.remove('fadein-out')
      }, 2000);
    }
    else{	// 最後の画像まで表示していないのなら
      counter++;	// 次の画像へ
      spImage.classList.add('fadein-out');
      setInterval(() => {
        spImage.classList.remove('fadein-out')
      }, 2000);
    }	
    setTimeout( slideChange2 , 10000);	// 10秒周期に画像を更新する
    spImage.src = spImages[counter];	// 次の画像を表示する
};

  <div class="background-image">
      <img src="" alt="" class="background-image__main background-image__main--mobile" id="mainImage">
      <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
    </div>
    <div class="background-image--mobile">
      <img src="" alt="" class="background-image__main background-image__main--mobile" id="spImage">
      <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
    </div>

Answer 1

window.onload=function()は2回目以降は後のものに上書きされます。
スマホ版とPC版を分岐する処理も無いので、そのあたりからまず調べてみてはいかがでしょう。

Comments

[kakedashi009]

知識が無い故にその発想にたどり着けませんでした。
ありがとうございます。