詳解用backgroundImage解決圖片輪播切換

發(fā)布時(shí)間：2019-08-07 15:29:07 作者：西安小哥

這篇文章主要介紹了詳解用backgroundImage解決圖片輪播切換，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

單dom節(jié)點(diǎn)實(shí)現(xiàn)輪播

利用backgroundImage可以添加多張圖片，以及位置偏移實(shí)現(xiàn)輪播效果

創(chuàng)建一個(gè)div；并用backgroundImage給div附圖片
利用backgroundPosition調(diào)節(jié)位置
利用css3 transition調(diào)節(jié)過渡
即可替代簡單的圖片切換

  /**
        * 播放圖片
        */
    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)
        }
    }

源代碼

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。