用backgroundImage解決圖片輪播切換

isLishude 發布于2019-08-30 15:44 / 2825人閱讀

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

單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)
        }
    }

源代碼

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116212.html

vue組件之輪播圖實現

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

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

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

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

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

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

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

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

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

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