详解用backgroundImage解决图片轮播切换

单dom节点实现轮播

利用backgroundImage可以添加多张图片，以及位置偏移实现轮播效果

• 创建一个div；并用backgroundImage给div附图片
• 利用backgroundPosition调节位置
• 利用css3 transition调节过渡
• 即可替代简单的图片切换

  
    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)
 }
    }

源代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。