backgroundImage を使用して画像カルーセルの切り替えを解決する詳細な説明

  /**
        * 画像を再生 */
    関数playImage(src) {
        if (animaitionFinshed) return;
        _imageElの場合
            _imageEl = document.createElement('div')
            _imageEl.className = `swiper_container`;
            _imageEl.style.backgroundImage = `url(${src.url})`;
            _imageEl.setAttribute("data-img", src.url);
            elContainer.appendChild(_imageEl);
        } それ以外 {
            アニメーション終了 = true;
            幅を elContainer.clientWidth、高さを elContainer.clientHeight とします。
            preImage を _imageEl.getAttribute("data-img"); とします。
            _imageEl.style.backgroundImage = `url(${preImage}),url(${src.url})`;
            _imageEl.style.backgroundPositionX = `center,${width + 20}px`;
            タイムアウトを設定する(() => {
                _imageEl.style.transition = "すべて 0.8 秒の緩和";
                _imageEl.style.backgroundPositionX = `-${width + 20}px,center`;
            }, 0);

            タイムアウトを設定する(() => {
                _imageEl.style.transition = "なし";
                _imageEl.style.backgroundImage = `url(${src.url}) `;
                _imageEl.style.backgroundPositionX = `center`;
                _imageEl.setAttribute("data-img", src.url)
                アニメーション終了 = false;
            }, 800)
        }
    }