用backgroundImage解決圖片輪播切換

isLishude 發(fā)布于2019-08-30 15:44 / 2833人閱讀

摘要：單節(jié)點實現(xiàn)輪播利用可以添加多張圖片，以及位置偏移實現(xiàn)輪播效果創(chuàng)建一個并用給附圖片利用調(diào)節(jié)位置利用調(diào)節(jié)過渡即可替代簡單的圖片切換播放圖片源代碼

單dom節(jié)點實現(xiàn)輪播

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

創(chuàng)建一個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)
        }
    }

源代碼

GPU云服務器云服務器五圖輪播切換 html輪播切換代碼圖片輪播圖片android輪播

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116212.html

vue組件之輪播圖實現(xiàn)

摘要：預覽地址圖片的輪播假設需要輪播三張圖片，以前的思路就如圖所示，添加兩個節(jié)點。通過索引的切換實現(xiàn)組件的無縫輪播。這樣子父組件就可以通過鉤子和來實時通知子組件，從而控制內(nèi)容的展示。這個判斷只需讓子組件來做就行了。預覽地址圖片的輪播 showImg(https://segmentfault.com/img/remote/1460000018606875?w=1440&h=900); 假設...

xuweijian 2019-08-23 16:13 評論0 收藏0
手把手教你用原生JavaScript造輪子（2）——輪播圖（更新：ES6版本）

摘要：綁定輪播事件然后是鼠標移入移出事件的綁定鼠標移入移出事件移入時停止輪播播放的定時器，移出后自動開始下一張的播放。通過上一篇文章的學習，我們基本掌握了一個輪子的封裝和開發(fā)流程。那么這次將帶大家開發(fā)一個更有難度的項目——輪播圖，希望能進一步加深大家對于面向?qū)ο蟛寮_發(fā)的理解和認識。 So, Lets begin! 目前項目使用 ES5及UMD 規(guī)范封裝，所以在前端暫時只支持標簽的引入方式...

jasperyang 2019-08-23 10:57 評論0 收藏0
JS實現(xiàn)輪播圖思路整理

摘要：結(jié)構(gòu)層表現(xiàn)層實現(xiàn)原理通過改變圖片的偏移量來實現(xiàn)圖片的切換實現(xiàn)步驟通過獲取頁面需要操作的元素獲取輪播圖父容器獲取圖片列表獲取圖片切換圓點按鈕獲取向左切換箭頭獲取向右切換箭頭實現(xiàn)左 html結(jié)構(gòu)層 ...

Anonymous1 2019-08-29 11:07 評論0 收藏0
JS實現(xiàn)輪播圖思路整理

摘要：結(jié)構(gòu)層表現(xiàn)層實現(xiàn)原理通過改變圖片的偏移量來實現(xiàn)圖片的切換實現(xiàn)步驟通過獲取頁面需要操作的元素獲取輪播圖父容器獲取圖片列表獲取圖片切換圓點按鈕獲取向左切換箭頭獲取向右切換箭頭實現(xiàn)左 html結(jié)構(gòu)層 ...

Meathill 2019-08-21 14:16 評論0 收藏0
JS實現(xiàn)輪播圖思路整理

摘要：結(jié)構(gòu)層表現(xiàn)層實現(xiàn)原理通過改變圖片的偏移量來實現(xiàn)圖片的切換實現(xiàn)步驟通過獲取頁面需要操作的元素獲取輪播圖父容器獲取圖片列表獲取圖片切換圓點按鈕獲取向左切換箭頭獲取向右切換箭頭實現(xiàn)左 html結(jié)構(gòu)層 ...

keithyau 2019-08-01 15:35 評論0 收藏0