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

  發布時間:2019-08-07 15:29:07   作者:西安小哥   我要評論

這篇文章主要介紹了詳解用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)
        }
    }

源代碼

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論

福建体育彩票时时彩11