無縫輪播圖

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

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

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

效果圖

微信公眾號(hào)：天字一等

GPU云服務(wù)器云服務(wù)器輪播圖寫輪播圖將輪播圖 php輪播圖

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

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

相關(guān)文章

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

摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

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

摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

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

摘要：輪播圖插件前言寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用加上網(wǎng)易云的接口，模擬網(wǎng)易云音樂移動(dòng)端。目前主要實(shí)現(xiàn)了無縫輪播，自動(dòng)播放，端左右按鈕點(diǎn)擊切換，移動(dòng)端手勢(shì)滑動(dòng)切換。輪播圖插件(Broadcast.js) 前言：寫這個(gè)插件的原因前段時(shí)間準(zhǔn)備用vue加上網(wǎng)易云的nodejs接口，模擬網(wǎng)易云音樂移動(dòng)端。因?yàn)橄胱约簩懸槐樗械拇a以及加固自己的flex布局，所以沒有使用UI組件。在輪播圖部分，...

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

摘要：起因現(xiàn)在自學(xué)前端中，學(xué)到移動(dòng)端，在做一個(gè)項(xiàng)目，課程開始用原生的方法寫輪播圖無縫，但是視頻講的是面向過程的方式，現(xiàn)在自己用面向?qū)ο蟮姆绞綄懸幌隆? ## 起因 ## 現(xiàn)在自學(xué)前端中，學(xué)到移動(dòng)端，在做一個(gè)項(xiàng)目，課程開始用原生的方法寫輪播圖（無縫），但是視頻講的是面向過程的方式，現(xiàn)在自己用面向?qū)ο蟮姆绞綄懸幌隆?## 上代碼 ## html的代碼分類 ...

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

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

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

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

Clect 2019-08-21 17:04 評(píng)論0 收藏0