background 互联网图片_详解用backgroundImage解决图片轮播切换

/**

* 播放图片

*/

function playImage(src) {

if (animaitionFinshed) return;

if (!_imageEl) {

_imageEl = document.createElement('div')

_imageEl.className = `swiper_container`;

_imageEl.style.backgroundImage = `url(${src.url})`;

_imageEl.setAttribute("data-img", src.url);

elContainer.appendChild(_imageEl);

} else {

animaitionFinshed = true;

let width = elContainer.clientWidth, height = elContainer.clientHeight;

let preImage = _imageEl.getAttribute("data-img");

_imageEl.style.backgroundImage = `url(${preImage}),url(${src.url}) `;

_imageEl.style.backgroundPositionX = `center,${width + 20}px`;

setTimeout(() => {

_imageEl.style.transition = "all 0.8s ease";

_imageEl.style.backgroundPositionX = `-${width + 20}px,center`;

}, 0);

setTimeout(() => {

_imageEl.style.transition = "none";

_imageEl.style.backgroundImage = `url(${src.url}) `;

_imageEl.style.backgroundPositionX = `center`;

_imageEl.setAttribute("data-img", src.url)

animaitionFinshed = false;

}, 800)

}

}