详解用backgroundImage解决图片轮播切换_F11 - 专业站长和开发者的学习网站

本篇文章介绍用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)
      }
  }

源代码-[-/a>