功能
默认情况无限循环向右移动点击数字切换到对应图片点击左右切换可切换图片原理首先说下原理。
在布局上所有的图片都是重叠的，即只要保证y方向对齐即可，当前可见的图z-index层级最高。每隔3s中更换一张图片，使用settimeout定时。使用gindex记录当前可视区域的展示的是哪张图片下标，每次更换，计算下一张图片的下标。通过requestanimationframe实现一次图片切换的动画。这种方法也可以做到整个页面始终只有2个img标签，而不必把所有的img节点全部创建出来，要点是每次更换不可见img的src。
动画的实现
首先定义一个timestap，这个值记录每个帧移动多少距离。定义初始step=0，记录移动的步数。每次移动的距离movewidth是timestamp*step，图片1向右移动增加movewidth，图片2从左侧进入movewidth。因此，图片1的transform是translate(movewidth), 而图片2的transform则是translate(movewidth-图片宽度)。step+1如果movewidth>图片宽度，步骤5，否则requestanimationframe请求下一次执行，继续2-4.图片1和2都将位置放置在起始位置，图片2的z-index设置为最高。这样就完成了一次移动的动画。
html代码1aa9e5d373740b65a0cc8f0a02150c53    9890cd3db8af2c13be66110fccb4c149        46035cfb8a0d95635d920894d340f673        d9fd74ace3179368a73ced5900692227        3f1c436ee4702584088029595ffdb561        6981aaf13a5329ce3c343a98790a928b    94b3e26ee717c64999d7867364b1b4a3    5854fa88d579fae799b3987b589adf23        2ca9b26f56e442d164d8198af3bc456e194b3e26ee717c64999d7867364b1b4a3        e388a4556c0f65e1904146cc1a846bee294b3e26ee717c64999d7867364b1b4a3        e388a4556c0f65e1904146cc1a846bee394b3e26ee717c64999d7867364b1b4a3        e388a4556c0f65e1904146cc1a846bee494b3e26ee717c64999d7867364b1b4a3    94b3e26ee717c64999d7867364b1b4a3    ef97f43c01124fc78febd898df2aef5e        b9821f58e2671d6195de476b0e283f7d94b3e26ee717c64999d7867364b1b4a3    94b3e26ee717c64999d7867364b1b4a3    d63265fd15dd0bd32166bea3d879ea48        b9821f58e2671d6195de476b0e283f7d94b3e26ee717c64999d7867364b1b4a3    94b3e26ee717c64999d7867364b1b4a3ab946e7546ab66a280dd9c9f9310ecd5
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();    // 绑定左右点击事件    oleft.onclick = function () {        cleartimeout(timeout);        leftmove();        begainanimate();    };    oright.onclick = function () {        cleartimeout(timeout);        rightmove();        begainanimate();    };    // 绑定数字序号事件    obutton.onclick = function (event) {        cleartimeout(timeout);        var targetel = event.target;        var nextindex = (+targetel.innertext) - 1;        console.log(nextindex);        rightmove(nextindex);        begainanimate();    }    // 默认初始动画朝右边    function begainanimate() {        cleartimeout(timeout);        timeout = settimeout(function () {            rightmove();            begainanimate();        }, 3000);    }    // 向左移动动画    function leftmove() {        var nextindex = (gindex - 1 b54d92a8a8de0d7ff1f90055ffc7a263= oimgs.length) ? 0 : gindex + 1;        }        animatesteps(nextindex, 50);    }    // 一次动画    function animatesteps(nextindex, timestamp) {        var currentimg = oimgs[gindex];        var nextimg = oimgs[nextindex];        nextimg.style.zindex = 10;        var step = 0;        requestanimationframe(gostep);        // 走一帧的动画，移动timestamp        function gostep() {            var movewidth = timestamp * step++;            if (math.abs(movewidth) aa8c7bda5196a2425f3940c27f8cd2eb 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> /* 首先设置图片box的区域，将图片重叠在一起 */ 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; } /* 数字序列按钮 */ .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>
推荐教程： 《js教程》
以上就是原生js使用transform实现banner的无限滚动效果的详细内容。