<ul id="esee0"></ul>

無縫輪播圖

RyanHoo 發布于2019-08-26 13:48 / 2340人閱讀

摘要：無縫輪播注意了只能獲取有內聯樣式的標簽的，否則為空。應該是涉及到了作用域鏈的知識點。每一步移動的距離是向右動畫函數當前圖片的位置效果圖微信公眾號天字一等

html:

css:

.container{
    position: relative;
    width:500px;
    height: 330px;
    overflow: hidden;
}
.carousel-image{
    position: absolute;
    width:3000px;
}

js:

let pre = document.getElementById("pre");
let next = document.getElementById("next");
let carouselImage = document.getElementsByClassName("carousel-image");
console.log(carouselImage[0].style.left)   //注意了：.style.left只能獲取有內聯樣式的標簽的left，否則為空。.offsetLeft才可以獲取標簽的left
//向右滑動
next.onclick = function () {
    animate(-500);
}
pre.onclick = function () {
    animate(500);
}
//移動函數
function animate(offset){    //為什么第二次go()函數調用時，offset為NaN
    var leftDistance = parseInt(carouselImage[0].style.left) + offset;
    var newoffset = offset;
    var speed = newoffset/20;   //注意：如果這行代碼放在go()函數里面，go()第二次執行的時候newoffset為NaN,導致定時器失效。應該是涉及到了作用域鏈的知識點。  每一步移動的距離  speed>0是向右
    //動畫函數
    function go(newoffset){
        currentLeft = carouselImage[0].style.left;   //當前圖片的位置
        if(speed > 0 && leftDistance > parseInt(currentLeft) || speed < 0 && leftDistance < parseInt(currentLeft)){
            carouselImage[0].style.left =  parseInt(currentLeft) + speed + "px";
            setTimeout(go,10);
        }else if(leftDistance < -1500){
            carouselImage[0].style.left = -500 + "px";
        }else if(leftDistance > -500){
            carouselImage[0].style.left = -1500 + "px";

        }
    }
    go(newoffset);
}

效果圖

微信公眾號：天字一等

GPU云服務器云服務器輪播圖寫輪播圖將輪播圖 php輪播圖

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

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

原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

MSchumi 2019-08-02 16:03 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

hatlonely 2019-08-22 18:09 評論0 收藏0
原生js寫一個無縫輪播圖插件(支持vue)

摘要：輪播圖插件前言寫這個插件的原因前段時間準備用加上網易云的接口，模擬網易云音樂移動端。目前主要實現了無縫輪播，自動播放，端左右按鈕點擊切換，移動端手勢滑動切換。輪播圖插件(Broadcast.js) 前言：寫這個插件的原因前段時間準備用vue加上網易云的nodejs接口，模擬網易云音樂移動端。因為想自己寫一遍所有的代碼以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

褰辯話 2019-08-30 15:53 評論0 收藏0
原生js + css3 + 定時器無縫輪播圖（部分）

摘要：起因現在自學前端中，學到移動端，在做一個項目，課程開始用原生的方法寫輪播圖無縫，但是視頻講的是面向過程的方式，現在自己用面向對象的方式寫一下。 ## 起因 ## 現在自學前端中，學到移動端，在做一個項目，課程開始用原生的方法寫輪播圖（無縫），但是視頻講的是面向過程的方式，現在自己用面向對象的方式寫一下。 ## 上代碼 ## html的代碼分類 ...

IamDLY 2019-08-23 15:21 評論0 收藏0
[vue組件]無縫輪播圖

摘要：實現原理無縫滾動預處理為了無縫滾動，在傳進來的數組首部增加末尾元素，在尾部追加首元素看圖數據綁定視圖為當前顯示的輪播圖索引，然后只需要對進行操作，監聽的變化，一旦到達了邊界就重置，顯示出對應的圖片。該文章請對應源碼閱讀，github源碼地址，DEMO使用地址，線上DEOM展示。做一個vue基礎組件系列，使用vue以最簡潔的方式實現常用組件，可用于快速二次定制化開發。 (??????...

GHOST_349178 2019-08-30 13:47 評論0 收藏0
[vue組件]無縫輪播圖

摘要：實現原理無縫滾動預處理為了無縫滾動，在傳進來的數組首部增加末尾元素，在尾部追加首元素看圖數據綁定視圖為當前顯示的輪播圖索引，然后只需要對進行操作，監聽的變化，一旦到達了邊界就重置，顯示出對應的圖片。該文章請對應源碼閱讀，github源碼地址，DEMO使用地址，線上DEOM展示。做一個vue基礎組件系列，使用vue以最簡潔的方式實現常用組件，可用于快速二次定制化開發。 (??????...

Clect 2019-08-21 17:04 評論0 收藏0