背景画像が一定時間ごとに変化するウェブページを作成したい

ウェブ制作初心の者です。

ページの背景画像を一定時間ごとに変化させるようなコードをjQueryで実現したいのですが、うまくいきません。色々と調べて、setIntervalを使ってみましたが、背景が白のままです。

実際に行いことは、１秒ごとに６枚のJPEG画像を順番に背景画像に適用させることです（1-2-3-4-5-6-1-2-...のように）。背景画像はデバイスの大きさに合わせてそれぞれ用意していて、レスポンシブなデザインにしたいです。

よろしくお願いいたします。

ソースコード

jQuery
1jQuery(window).on('load resize', function() {
2    var windowWidth = window.innerWidth;
3  
4    if (windowWidth > 1024) {
5      // desktop
6          var i = 1;
7          setInterval(function(){
8              if(i<=6){
9                  jQuery("body").css("background-image","url('home/page" + i + "_desktop.jpeg')no-repeat fixed center center");
10                  i++;
11              }
12              else
13                  i = 1;
14          },1000);
15      
16    } else if (windowWidth > 768) {
17      // tablet
18          var i = 1;
19          setInterval(function(){
20              if(i<=6){
21                  jQuery("body").css("background-image","url('home/page" + i + "_ipad.jpeg')no-repeat fixed center center");
22                  i++;
23              }
24              else
25                  i = 1;
26          },1000);
27      }
28     else {
29      // smart phone
30          var i = 1;
31          setInterval(function(){
32              if(i<=6){
33              jQuery("body").css("background-image","url('home/page" + i + ".jpeg')no-repeat fixed center center");
34              i++;
35              }
36              else
37                  i = 1;
38          },1000);
39    }
40  });

確認したこと

index.htmlでjQuery本体はインポートされている
jQuery本体や画像のフォルダは同じ階層に存在

m.ts10806

2020/01/18 07:53

コードがどこまで通っているかデバッグしてみましたか？

naoyadog

2020/01/18 08:13

デバッグしてみましたが、jQueryは動作しているようです。しかし、画像を格納しているフォルダがデベロッパーツール(Safari)上に現れていません。上のコードでゆうと'home'という名前のフォルダです。

行動規範の内容に同意します

回答1件

ベストアンサー

CSSプロパティ名が違っていました。

JavaScript
1    if (windowWidth > 1024) {
2      // desktop
3          var i = 1;
4          setInterval(function(){
5              jQuery("body").css("background","url('home/page" + i + "_desktop.jpeg')no-repeat fixed center center");
6              i++;
7              if (i > 6)
8                  i = 1;
9          }, 1000);
10    }