I want to use jQuery so that the image changes as it fades.

Error message

The image does not change.

Code

Code

.main {
height: 1000px;
}

.image-crossfader {
overflow: hidden;
position: relative;
height: 100%;
}
.image-crossfader-inner {
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-crossfader-inner: nth-child (1) {
background-image: url ('https://bit.ly/2lO4USI');
}
.image-crossfader-inner: nth-child (2) {
background-image: url ('https://bit.ly/2lO9PDg');
}
.image-crossfader-inner: nth-child (3) {
background-image: url ('https://bit.ly/2mEDLzs');
}
.image-crossfader-inner: nth-child (4) {
background-image: url ('https://bit.ly/2mo9SaH');
}

Code

var $inner, duration, defaultIndex, switchImage;
$inner = $(". image-crossfader-inner");
interval = 3500;
duration = 5000;
defaultIndex = 0;
switchImage = function (next) {
var current, $current, $next;
current = next? next-1: $inner.length-1;
$current = $inner.eq (current);
$current.css ({"z-index": 0}). fadeOut (interval, "easeInOutQuad");
$({scale: 1.06}). animate (
{scale: 1},
{
duration: interval,
easing: "easeInOutQuad",
progress: function () {
$current.css ("transform", "scale (" + this.scale + ")");
}
}
);
$next = $inner.eq (next);
$next.css ({"z-index": 1}). fadeIn (interval, "easeInOutQuad");
$({scale: 1}). animate (
{scale: 1.06},
{
duration: interval,
easing: "easeInOutQuad",
progress: function () {
$next.css ("transform", "scale (" + this.scale + ")");
}
}
);
next = ++ next<$inner.length? next: 0;
setTimeout (switchImage.bind (this, next), duration);
};
$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/= d/2)<1) return (c/2) * t * t + b;
return (-c/2) * (--t * (t-2)-1) + b;
};
window.onload = function () {
$inner.fadeOut (0);
switchImage.bind (this, defaultIndex) ();
};

Please provide more detailed information here.