首页 / 技术问答 / Javascript问答列表 / 问答详情

如何在 Javascript 中创建无限轮播

我想用Java脚本制作一个无限的 carousel .当元素从屏幕上消失时，我会克隆它们并粘贴 他们在名单的末尾.但是一分钟后，在HTML布局中就会有很多克隆的元素. 我决定在克隆后删除这个元素.但我得到了所有元素的即时补偿.如何避免呢？ 或者，关于如何实现这种无穷无尽的 carousel ，可能还有另一种算法？

这是代码https://codepen.io/alessandro-kex/pen/abGWNEK

window.addEventListener("load", function () {
  const slideContainer = document.querySelector(".carousel");
  const slidesWrapper = document.querySelector(".carousel-slides");
  let slides = document.querySelectorAll(".carousel-slide");
  let index = 0;
  const interval = 1500;
  let moveDistance = 0;
  const paddingRight = 50;
  let lastSlideIndex = slides.length - 1;
  let firstClone;

  const startSlide = (index) => {
    this.setInterval(() => {
      moveDistance = moveDistance + slides[index].clientWidth + paddingRight;
      slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
      slidesWrapper.style.transition = "1s";

      firstClone = slides[index].cloneNode(true);
      firstClone.id = `first-clone-${index}`;
      slidesWrapper.append(firstClone);
      /*If uncomment it - then the problem starts */
      //slides[index].remove();

      index++;
    }, interval);
  };
  startSlide(index);
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carousel {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.carousel-slides {
  display: flex;
  list-style: none;
  gap: 50px;
  flex-shrink: 1;
}

.carousel-slide {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
}

.carousel-slide {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.carousel-item-text {
  white-space: nowrap;
}

.carousel-item-img {
  width: 100px;
  height: auto;
}

.round {
  padding: 30px 50px;
  border-radius: 120px;
}

.light-blue {
  background-color: #d8f1ff;
}

.pink {
  background-color: #ffeaf0;
}

.purpule {
  background-color: #eae9ff;
}
  <div class="carousel">
    <ul class="carousel-slides">
      <li class="carousel-slide" data-number="0">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide light-blue round" data-number="1">
        <span class="carousel-item-text">11111111 1111 <br> 111111111</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide pink round">
        <span class="carousel-item-text">22222 22222 <br> 222222222 2222222222 222222222</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide light-blue round">
        <span class="carousel-item-text">333 333333333 <br> 333333333333</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide purpule round">
        <span class="carousel-item-text">4444 444444444444<br> 44444</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide  pink round">
        <span class="carousel-item-text">55555555 55555<br> 55 5555</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide pink round">
        <span class="carousel-item-text">6666666 6666666666 <br> 66666 6666666 66666</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide  light-blue round">
        <span class="carousel-item-text">777777 777 777<br> 77 77777</span>
      </li>
      <li class="carousel-slide">
        <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
      </li>
      <li class="carousel-slide purpule round" data-number="16">
        <span class="carousel-item-text">888 8888<br> 88888888</span>
      </li>
    </ul>
  </div>

推荐答案

对于这种事情，你应该熟悉promises

otherwise the idea is the right one,
1 - make a translateX with a transition time
2 - once the transition is finished remove the transition time
3 - put the first element at the end and reset the translateX to zero
4 - start again...

完整代码:

 
(async ()=>   // async IIFE code for slider.
  {
  const
    interval       = 1500  // ms
  , paddingRight   = 50
  , slideContainer = document.querySelector('.carousel') 
  , slidesWrapper  = document.querySelector('.carousel-slides')
  , slides         = document.querySelectorAll('.carousel-slides > li')
  , delay          = ms => new Promise(r => setTimeout(r, ms))
  , movLeft = (el, mov) => new Promise(r =>
    {
    el.ontransitionend =_=>
      {
      el.ontransitionend = null
      el.style.transition = 'none';
      r()
      }
    el.style.transition = '1s';
    el.style.transform  = `translateX(${-mov}px)`;
    });

  let index = 0;

  while (true) // infinite carrousel loop
    {
    await delay( interval )
    await movLeft( slidesWrapper, slides[index].clientWidth + paddingRight  )

    slidesWrapper.appendChild( slides[index] )  // mov first slide to the end
    slidesWrapper.style.transform    = `translateX(0)` // rest translateX
    index = ++index % slides.length
    }
  })()
* {
  margin           : 0;
  padding          : 0;
  box-sizing       : border-box;
  }
.carousel {
  margin           : 0 auto;
  width            : 100%;
  position         : relative;
  }
.carousel-slides {
  display          : flex;
  list-style       : none;
  gap              : 50px;
  flex-shrink      : 1;
  }
.carousel-slide {
  position         : relative;
  min-width        : 0;
  flex-shrink      : 0;
  height           : 100px;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  min-width        : 0;
  }
.carousel-item-text {
  white-space      : nowrap;
  }
.carousel-item-img {
  width            : 100px;
  height           : auto;
  }
.round {
  padding          : 30px 50px;
  border-radius    : 120px;
  }
.light-blue {
  background-color : #d8f1ff;
  }
.pink {
  background-color : #ffeaf0;
  }
.purpule {
  background-color : #eae9ff;
  }
<div class="carousel">
  <ul class="carousel-slides">
    <li class="carousel-slide" data-number="0">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide light-blue round" data-number="1">
      <span class="carousel-item-text">11111111 1111 <br> 111111111</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide pink round">
      <span class="carousel-item-text">22222 22222 <br> 222222222 2222222222 222222222</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide light-blue round">
      <span class="carousel-item-text">333 333333333 <br> 333333333333</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide purpule round">
      <span class="carousel-item-text">4444 444444444444<br> 44444</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide  pink round">
      <span class="carousel-item-text">55555555 55555<br> 55 5555</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide pink round">
      <span class="carousel-item-text">6666666 6666666666 <br> 66666 6666666 66666</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide  light-blue round">
      <span class="carousel-item-text">777777 777 777<br> 77 77777</span>
    </li>
    <li class="carousel-slide">
      <img src="https://via.placeholder.com/150" alt="" class="carousel-item-img">
    </li>
    <li class="carousel-slide purpule round" data-number="16">
      <span class="carousel-item-text">888 8888<br> 88888888</span>
    </li>
  </ul>
</div>

Javascript相关问答推荐

我应该绑定不影响状态的函数吗？'

将2D数组转换为图形

在拖放时阻止文件打开

显示图—如何在图例项上添加删除线效果？

查询参数中的JAVASCRIPT/REACT中的括号

当我try 将值更改为True时，按钮不会锁定

在不删除代码的情况下禁用Java弹出功能WordPress

与svg相反；S getPointAtLength(D)-我想要getLengthAtPoint(x，y)

传递方法VS泛型对象VS事件特定对象

按什么顺序接收`storage`事件？

打字脚本中方括号符号属性访问和拾取实用程序的区别

将基元传递给THEN处理程序

将嵌套数组的元素乘以其深度，输出一个和

如何使用画布在另一个内部绘制一个较小但相同的形状，同时保持恒定的边界厚度？

使用Reaction窗体挂钩注册日历组件

AstroJS混合模式服务器终结点返回404

与find()方法一起使用时，Mongoose中的$or运算符没有提供所有必需的数据

JavaScript structuredClone在Chrome/Edge中获得了非法调用，但在NodeJS中没有

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色 ？

如何让noWrap在嵌套在Alert/AlertTitle组件中的排版组件中工作？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630