成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

用backgroundImage解決圖片輪播切換

isLishude / 2891人閱讀

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

單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é)過渡

即可替代簡(jiǎn)單的圖片切換

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

源代碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116212.html

相關(guān)文章

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

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

    xuweijian 評(píng)論0 收藏0

  • 手把手教你用原生JavaScript造輪子（2）——輪播圖（更新：ES6版本）

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

    jasperyang 評(píng)論0 收藏0

  • JS實(shí)現(xiàn)輪播圖思路整理

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

    Anonymous1 評(píng)論0 收藏0

  • JS實(shí)現(xiàn)輪播圖思路整理

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

    Meathill 評(píng)論0 收藏0

  • JS實(shí)現(xiàn)輪播圖思路整理

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

    keithyau 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<