JavaScriptで背景画像がスライドで切り替わるようにしたい

2020/09/22追記

背景変更ボタンをタップしたら、背景画像が変わるようにしました。
切り替わる際にスライドするアニメーションをいれたいのですが、
自分のスキルではわかりませんでした。

スライドアニメーションをいれたら、背景変更ボタンをタップで切り替えることができなくなりました。
現状は、タイマー形式で背景画像にスライドアニメーションがはいります。
タイマー形式の切り替えを削除して、背景変更ボタンで背景画像をスライドアニメーションで切り替えたいです。

下記現状のコードです。宜しくお願い致します。

JavaScript
1        $(function() {
2        var idx = 3;
3        var interval = 5000;
4        var items = $(".slide");
5        
6        slideTimer();
7        timer = setInterval(slideTimer, interval);
8      
9        function slideTimer() {
10          items.removeClass("is-old");
11          items.eq(idx).removeClass("is-now").addClass("is-old");
12          items.eq(idx==3 ? idx=0 : ++idx).addClass("is-now");    
13        };
14      });

HTML
1<body> 
2      <div>
3        <div class="submit"><input type="button" value="背景変更" onclick="func()"></div>
4      </div>
5      <div class="slider">
6        <div class="slideSet">
7          <div class="slide">      
8            <div class="img"></div>
9          </div>
10          <div class="slide">
11            <div class="img"></div>
12          </div>
13          <div class="slide">
14            <div class="img"></div>
15            </div>
16          <div class="slide">
17            <div class="img"></div>
18            </div>
19        </div>
20      </div>
21      <script>
22        $(function() {
23        var idx = 3;
24        var interval = 5000;
25        var items = $(".slide");
26        
27        slideTimer();
28        timer = setInterval(slideTimer, interval);
29      
30        function slideTimer() {
31          items.removeClass("is-old");
32          items.eq(idx).removeClass("is-now").addClass("is-old");
33          items.eq(idx==3 ? idx=0 : ++idx).addClass("is-now");    
34        };
35      });
36      </script>
37  </body>

CSS
1.submit{
2position:fixed;
3bottom:4%;
4width:86%;
5left: 50%;
6transform: translateX(-50%);
7margin: auto;
8z-index:100;
9}
10
11.slide:nth-child(1) > .img {
12  background-image: url("../img/bg01.jpg");
13}
14.slide:nth-child(2) > .img {
15  background-image: url("../img/bg02.jpg");
16}
17.slide:nth-child(3) > .img {
18  background-image: url("../img/bg03.jpg");
19}
20.slide:nth-child(4) > .img {
21  background-image: url("../img/bg04.jpg");
22}
23
24.slider {
25  position: relative;
26  overflow: hidden;
27  width: 100%;
28  height: 100vh;
29  margin: 0 auto
30}
31.slide {
32  position: absolute; 
33  right: 0;
34  width: 0;
35  height: 100vh;
36  overflow: hidden;
37  transition: width 1.4s linear;
38  transition-timing-function: ease-out;
39}
40
41.slide > .img {
42  position: absolute;
43  width: 110vw;
44  height: 110vh;
45  background-position: center;
46  background-size: cover;
47  right: -10vw;  
48  transition: right 0s 1s linear;
49  transition-timing-function: ease-out;
50}
51
52.slide.is-now > .img, .slide.is-now > .img {
53  right: 0;  
54  transition: right 1.4s linear;
55  transition-timing-function: ease-out;
56}
57.slide.is-now {
58  width: 100%;
59  z-index: 2;
60}
61.slide.is-old {
62  width: 100%;
63  z-index: 1;
64}

2020/09/20投稿

背景変更ボタンをタップしたら、背景画像が変わるようにしました。
切り替わる際にスライドするアニメーションをいれたいのですが、
自分のスキルではわかりませんでした。

http://plugins.gravitysign.com/backslider/

Effects＞Slide

実装したいスライドのイメージは、こちらが一番近いです。

下記が現状のコードです。
もしわかるかたいらっしゃいましたらお力おかしください。
何卒宜しくお願い致します。

HTML
1  <body> 
2      <div class="wrapper">
3        <div class="submit"><input type="button" value="背景変更" onclick="func()"></div>
4      </div>
5      <script src="js/bgchange.js"></script>
6  </body>

CSS
1.wrapper { 
2    background-image:url("../img/bg01.jpg");
3    background-size:cover;
4}

JavaScript
1// 切り替える画像を配列に入れておく
2const img = ['img/bg01.jpg', 'img/bg02.jpg', 'img/bg03.jpg', 'img/bg04.jpg'];
3let c = 0;
4
5function func() {
6  // 関数が読み込まれるたびにカウントアップ
7  c++;
8
9  // 画像の数を超えたらリセット
10  if (c >= img.length) c = 0;
11
12  // 要素を指定して背景画像のスタイルを変更
13  document.querySelector('.wrapper').style.backgroundImage = `url("${img[c]}")`;
14}

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

回答2件

ベストアンサー

以前、似たような質問があったときにサンプルを作成したのでご参考に。

jQuery - スライドの仕方をhttps://infcurion.digital/のサイトのように動かしたい。｜teratail

上記の質問の回答にサンプルがあります。

動きの向きが左右逆ですが、アニメーションは
http://plugins.gravitysign.com/backslider/
Effects＞Slide
とほぼ同じです。
動きの向きは簡単に修正できると思います。

投稿2020/09/21 02:57

編集2020/09/21 03:00

hatena19

総合スコア34075

treevillage

2020/09/21 03:35

ご回答ありがとうございます。 jQuery - スライドの仕方をhttps://infcurion.digital/のサイトのように動かしたい。｜teratail こちらの質問の場合は、HTML上に画像のコードをかいてスタイルで隠している形かと思いますが、今回の私のように、JavascriptでCSSの背景画像を変えてる場合には、どこにアニメーションのコードをかけばよろしいでしょうか？どうぞよろしくお願いいたします。