javascript怎么實(shí)現(xiàn)banner無(wú)限滾動(dòng)效果？針對(duì)這個(gè)問(wèn)題，這篇文章給出了相對(duì)應(yīng)的分析和解答，希望能幫助更多想解決這個(gè)問(wèn)題的朋友找到更加簡(jiǎn)單易行的辦法。

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供饒陽(yáng)網(wǎng)站建設(shè)、饒陽(yáng)做網(wǎng)站、饒陽(yáng)網(wǎng)站設(shè)計(jì)、饒陽(yáng)網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、饒陽(yáng)企業(yè)網(wǎng)站模板建站服務(wù)，10余年饒陽(yáng)做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

功能

• 默認(rèn)情況無(wú)限循環(huán)向右移動(dòng)
• 點(diǎn)擊數(shù)字切換到對(duì)應(yīng)圖片
• 點(diǎn)擊左右切換可切換圖片

原理

首先說(shuō)下原理。

1. 在布局上所有的圖片都是重疊的，即只要保證Y方向?qū)R即可，當(dāng)前可見(jiàn)的圖z-index層級(jí)最高。
2. 每隔3s中更換一張圖片，使用setTimeout定時(shí)。
3. 使用gIndex記錄當(dāng)前可視區(qū)域的展示的是哪張圖片下標(biāo)，每次更換，計(jì)算下一張圖片的下標(biāo)。
4. 通過(guò)requestAnimationFrame實(shí)現(xiàn)一次圖片切換的動(dòng)畫(huà)。

這種方法也可以做到整個(gè)頁(yè)面始終只有2個(gè)img標(biāo)簽，而不必把所有的img節(jié)點(diǎn)全部創(chuàng)建出來(lái)，要點(diǎn)是每次更換不可見(jiàn)img的src。

動(dòng)畫(huà)的實(shí)現(xiàn)

1. 首先定義一個(gè)timestap，這個(gè)值記錄每個(gè)幀移動(dòng)多少距離。定義初始step=0，記錄移動(dòng)的步數(shù)。
2. 每次移動(dòng)的距離moveWidth是timestamp*step，圖片1向右移動(dòng)增加moveWidth，圖片2從左側(cè)進(jìn)入moveWidth。因此，圖片1的transform是translate(moveWidth), 而圖片2的transform則是translate(moveWidth-圖片寬度)。
3. step+1
4. 如果moveWidth>圖片寬度，步驟5，否則requestAnimationFrame請(qǐng)求下一次執(zhí)行，繼續(xù)2-4.
5. 圖片1和2都將位置放置在起始位置，圖片2的z-index設(shè)置為最高。

這樣就完成了一次移動(dòng)的動(dòng)畫(huà)。

html代碼

<header>
    <p class="box">
        <img src="imgs/banner1.jpg">
        <img src="imgs/banner2.jpg">
        <img src="imgs/banner3.jpg">
        <img src="imgs/banner4.jpg">
    </p>
    <p class="buttons">
        <p class="active">1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </p>
    <p class="left">
        <p class="arrow"></p>
    </p>
    <p class="right">
        <p class="arrow"></p>
    </p>
</header>

JS代碼

var timeout = null;
window.onload = function () {
    var oLeft = document.querySelector('.left');
    var oRight = document.querySelector('.right');
    var oButton = document.querySelector('.buttons');
    var oButtons = document.querySelectorAll('.buttons p');
    var oImgs = document.querySelectorAll('.box img');
    var imgWidth = oImgs[0].width;
    var gIndex = 0;
    begainAnimate();

    // 綁定左右點(diǎn)擊事件
    oLeft.onclick = function () {
        clearTimeout(timeout);
        leftMove();
        begainAnimate();
    };
    oRight.onclick = function () {
        clearTimeout(timeout);
        rightMove();
        begainAnimate();
    };
    // 綁定數(shù)字序號(hào)事件
    oButton.onclick = function (event) {
        clearTimeout(timeout);
        var targetEl = event.target;
        var nextIndex = (+targetEl.innerText) - 1;
        console.log(nextIndex);
        rightMove(nextIndex);
        begainAnimate();
    }
    // 默認(rèn)初始動(dòng)畫(huà)朝右邊
    function begainAnimate() {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            rightMove();
            begainAnimate();
        }, 3000);
    }
    // 向左移動(dòng)動(dòng)畫(huà)
    function leftMove() {
        var nextIndex = (gIndex - 1 < 0) ? oImgs.length - 1 : gIndex - 1;
        animateSteps(nextIndex, -50);
    }
    // 向右移動(dòng)動(dòng)畫(huà)
    function rightMove(nextIndex) {
        if (nextIndex == undefined) {
            nextIndex = (gIndex + 1 >= oImgs.length) ? 0 : gIndex + 1;
        }
        animateSteps(nextIndex, 50);
    }
    // 一次動(dòng)畫(huà)
    function animateSteps(nextIndex, timestamp) {
        var currentImg = oImgs[gIndex];
        var nextImg = oImgs[nextIndex];
        nextImg.style.zIndex = 10;
        var step = 0;
        requestAnimationFrame(goStep);
        // 走一幀的動(dòng)畫(huà)，移動(dòng)timestamp
        function goStep() {
            var moveWidth = timestamp * step++;
            if (Math.abs(moveWidth) < imgWidth) {
                currentImg.style.transform = `translate(${moveWidth}px)`;
                nextImg.style.transform = `translate(${moveWidth > 0 ? (moveWidth - imgWidth) : (imgWidth + moveWidth)}px)`;
                requestAnimationFrame(goStep);
            } else {
                currentImg.style.zIndex = 1;
                currentImg.style.transform = `translate(0px)`;
                nextImg.style.transform = `translate(0px)`;
                oButtons[gIndex].setAttribute('class', '');
                oButtons[nextIndex].setAttribute('class', 'active');
                gIndex = nextIndex;
            }
        }
    }
}
window.onclose = function () {
    clearTimeout(timeout);
}

css布局樣式

<style>
    /* 首先設(shè)置圖片box的區(qū)域，將圖片重疊在一起  */
    header {
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    .box {
        width: 100%;
        height: 300px;
    }
    .box img {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateX(0);
        z-index: 1;
    }
    .box img:first-child {
        z-index: 10;
    }
    
    /* 數(shù)字序列按鈕 */
    .buttons {
        position: absolute;
        right: 10%;
        bottom: 5%;
        display: flex;
        z-index: 100;
    }

    .buttons p {
        width: 30px;
        height: 30px;
        background-color: #aaa;
        border: 1px solid #aaa;
        text-align: center;
        margin: 10px;
        cursor: pointer;
        opacity: .7;
        border-radius: 15px;
        line-height: 30px;
    }

    .buttons p.active {
        background-color: white;
    }

    /* 左右切換按鈕 */
    .left,
    .right {
        position: absolute;
        width: 80px;
        height: 80px;
        background-color: #ccc;
        z-index: 100;
        top: 110px;
        border-radius: 40px;
        opacity: .5;
        cursor: pointer;
    }

    .left {
        left: 2%;
    }

    .right {
        right: 2%;
    }

    .left .arrow {
        width: 30px;
        height: 30px;
        border-left: solid 5px #666;
        border-top: solid 5px #666;
        transform: translate(-5px, 25px) rotate(-45deg) translate(25px, 25px);
    }

    .right .arrow {
        width: 30px;
        height: 30px;
        border-left: solid 5px #666;
        border-top: solid 5px #666;
        transform: translate(50px, 25px) rotate(135deg) translate(25px, 25px);
    }
</style>

關(guān)于javascript實(shí)現(xiàn)banner無(wú)限滾動(dòng)效果的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前題目：javascript怎么實(shí)現(xiàn)banner無(wú)限滾動(dòng)效果
本文來(lái)源：http://www.chinadenli.net/article14/gidcde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、面包屑導(dǎo)航、小程序開(kāi)發(fā)、云服務(wù)器、App開(kāi)發(fā)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)