無縫輪播圖

時飛發(fā)布于2019-08-30 10:56 / 2761人閱讀

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

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只能獲取有內聯(lián)樣式的標簽的left，否則為空。.offsetLeft才可以獲取標簽的left
//向右滑動
next.onclick = function () {
    animate(-500);
}
pre.onclick = function () {
    animate(500);
}
//移動函數(shù)
function animate(offset){    //為什么第二次go()函數(shù)調用時，offset為NaN
    var leftDistance = parseInt(carouselImage[0].style.left) + offset;
    var newoffset = offset;
    var speed = newoffset/20;   //注意：如果這行代碼放在go()函數(shù)里面，go()第二次執(zhí)行的時候newoffset為NaN,導致定時器失效。應該是涉及到了作用域鏈的知識點。  每一步移動的距離  speed>0是向右
    //動畫函數(shù)
    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輪播圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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