jqueryを使用して画像切替をしたいです

前提・実現したいこと

jQueryを使い、画像がフェードしながら変わっていくようにしたいです。

発生している問題・エラーメッセージ

画像が変化しません。

html
1コード
2```  <section class="main">
3    <div class="image-crossfader">
4      <div class="image-crossfader-inner"></div>
5      <div class="image-crossfader-inner"></div>
6      <div class="image-crossfader-inner"></div>
7      <div class="image-crossfader-inner"></div>
8    </div>
9  </section>
10
11```css
12コード
13``` .main {
14  height: 1000px;
15}
16
17.image-crossfader {
18  overflow: hidden;
19  position: relative;
20  height: 100%;
21}
22.image-crossfader-inner {
23  background-size: cover;
24  background-position: center;
25  position: absolute;
26  top: 0;
27  left: 0;
28  width: 100%;
29  height: 100%;
30}
31.image-crossfader-inner:nth-child(1) {
32  background-image: url('https://bit.ly/2lO4USI');
33}
34.image-crossfader-inner:nth-child(2) {
35  background-image: url('https://bit.ly/2lO9PDg');
36}
37.image-crossfader-inner:nth-child(3) {
38  background-image: url('https://bit.ly/2mEDLzs');
39}
40.image-crossfader-inner:nth-child(4) {
41  background-image: url('https://bit.ly/2mo9SaH');
42}
43
44
45```jQuery
46コード
47```var $inner, duration, defaultIndex, switchImage;
48$inner = $(".image-crossfader-inner");
49interval = 3500;
50duration = 5000;
51defaultIndex = 0;
52switchImage = function(next) {
53  var current, $current, $next;
54  current = next ? next - 1 : $inner.length - 1;
55  $current = $inner.eq(current);
56  $current.css({ "z-index": 0 }).fadeOut(interval, "easeInOutQuad");
57  $({ scale: 1.06 }).animate(
58    { scale: 1 },
59    {
60      duration: interval,
61      easing: "easeInOutQuad",
62      progress: function() {
63        $current.css("transform", "scale(" + this.scale + ")");
64      }
65    }
66  );
67  $next = $inner.eq(next);
68  $next.css({ "z-index": 1 }).fadeIn(interval, "easeInOutQuad");
69  $({ scale: 1 }).animate(
70    { scale: 1.06 },
71    {
72      duration: interval,
73      easing: "easeInOutQuad",
74      progress: function() {
75        $next.css("transform", "scale(" + this.scale + ")");
76      }
77    }
78  );
79  next = ++next < $inner.length ? next : 0;
80  setTimeout(switchImage.bind(this, next), duration);
81};
82$.easing.easeInOutQuad = function(x, t, b, c, d) {
83  if ((t /= d / 2) < 1) return (c / 2) * t * t + b;
84  return (-c / 2) * (--t * (t - 2) - 1) + b;
85};
86window.onload = function() {
87  $inner.fadeOut(0);
88  switchImage.bind(this, defaultIndex)();
89};
90
91
92
93
94ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

結構簡単に書けます。

jQuery
1
2var elements = $('.image-crossfader-inner');
3elements.fadeOut();
4var iN = elements.length;
5var i = 0;
6function change() {
7  elements.fadeOut();
8  elements.eq(i).fadeIn();
9  if(i>=iN-1){
10    i = 0;
11  } else {
12    i++;
13  }
14}
15setInterval(change,2000);
16