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

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

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

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

Q&A

解決済

1回答

1571閲覧

JavaScriptでリサイズの度にページを更新する関数を実行したい

kakedashi009

総合スコア5

JavaScript

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

0グッド

0クリップ

投稿2020/08/10 09:36

編集2020/08/10 16:10

前提・実現したいこと

現在JavaScriptにてページを読み込んだ際に背景画像が遷移するスライドショーを実装しようとしており、実際にモバイル版とPC、タブレット版に分けて画像を変えて実装したのですが、手動で画面幅をリサイズした際にスライドショーが始まらない現象が起こっている(リサイズ後に更新すれば正常に動作する)のを修正し、手動でリサイズした際にJavaScriptの仕組みとして更新するように処理し、スライドショーを開始させたいです。

試したこと

上記のような機能を実装するため、
function reload (){ //ページを更新するための関数
document.location.reload;
};
という関数を定義し、
window.onresize =reload;
の構文を用いてリサイズされた際にページを更新するような処理を記述したのですが、変わらずリサイズしてもスライドショーが始まらないです。

該当のソースコード

JavaScript

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

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

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

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

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

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

kmtr

2020/08/11 02:23

`if (matchMedia('(max-width: 600px)').matches) {` の閉じカッコがもれていそうですがどの位置に付きますか?
kakedashi009

2020/08/11 10:56

// window.addEventListener('resize' , reload ()); } else { // それ以外(PC版とタブレット版) このelseの直前に記述されていると思います。
guest

回答1

0

ベストアンサー

document.location.reload()がないので実行されていないのではないかと思ったのですがどうでしょうか?

投稿2020/08/12 06:40

kmtr

総合スコア213

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

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

kakedashi009

2020/08/12 09:01

無事に実行されました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問