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

单dom节点实现轮播

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

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

  /**
        * 播放图片
        */
    function  play Image(src) {
        if (anim ai tionFinshed) return;
        if (!_imageEl) {
            _imageEl = document.createElement('div')
            _imageEl. classname  = `swi PE r_container`;
            _imageEl.style.backgroundImage = `url(${src.url})`;
            _imageEl. setattribute ("data- img ", src.url);
            elContainer.appendChild(_imageEl);
        } else {
            animaitionFinshed = true;
            let width = elContainer.clientWidth, h ei ght = elContainer.clientHeight;
            let  PR eImage = _imageEl.getAttribute("data -i mg");
            _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)
        }
    }

源代码

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

总结

以上是 为你收集整理的 详解用backgroundImage解决图片轮播切换 全部内容，希望文章能够帮你解决 详解用backgroundImage解决图片轮播切换 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于详解用backgroundImage解决图片轮播切换的详细内容...