189 8069 5689

JS怎么用transform实现banner的无限滚动

本篇内容介绍了“JS怎么用transform实现banner的无限滚动”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

仙居网站建设公司创新互联,仙居网站设计制作，有大型网站制作公司丰富经验。已为仙居上千提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的仙居做网站的公司定做！

功能

JS怎么用transform实现banner的无限滚动

默认情况无限循环向右移动
点击数字切换到对应图片
点击左右切换可切换图片

原理

首先说下原理。

在布局上所有的图片都是重叠的，即只要保证Y方向对齐即可，当前可见的图z-index层级最高。
每隔3s中更换一张图片，使用setTimeout定时。
使用gIndex记录当前可视区域的展示的是哪张图片下标，每次更换，计算下一张图片的下标。
通过requestAnimationFrame实现一次图片切换的动画。

这种方法也可以做到整个页面始终只有2个img标签，而不必把所有的img节点全部创建出来，要点是每次更换不可见img的src。

JS怎么用transform实现banner的无限滚动

动画的实现

首先定义一个timestap，这个值记录每个帧移动多少距离。定义初始step=0，记录移动的步数。
每次移动的距离moveWidth是timestamp*step，图片1向右移动增加moveWidth，图片2从左侧进入moveWidth。因此，图片1的transform是translate(moveWidth), 而图片2的transform则是translate(moveWidth-图片宽度)。

3. step+1

4. 如果moveWidth>图片宽度，步骤5，否则requestAnimationFrame请求下一次执行，继续2-4.

5. 图片1和2都将位置放置在起始位置，图片2的z-index设置为最高。

这样就完成了一次移动的动画。

html代码

1

2

3

4

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 div');      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 < 0) ? oImgs.length - 1 : gIndex - 1;          animateSteps(nextIndex, -50);      }      // 向右移动动画      function rightMove(nextIndex) {          if (nextIndex == undefined) {              nextIndex = (gIndex + 1 >= 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) < 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布局样式

“JS怎么用transform实现banner的无限滚动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

标题名称：JS怎么用transform实现banner的无限滚动
文章路径：http://cdxtjz.cn/article/jchsoj.html

其他资讯