CSS/JS 滑块动画循环，具有顺序幻灯片位置

huangapple
go评论121阅读模式
英文:

CSS/JS Slider Animation Loop with Sequential Slide Positions

问题

我想实现一个CSS/JS滑块，应该执行以下操作：

  1. 应该有2个或更多个div
  2. 应该在加载时显示第一个div 3秒钟，然后第一个div 应该被第二个替换，第二个被第三个替换，依此类推...
  3. 动画必须按顺序出现（右，下，左，上...）
  4. 动画应该循环播放
  5. 每个div必须显示3秒，然后显示下一张幻灯片

我尝试了以下代码：https://codesandbox.io/s/nostalgic-dewdney-lnz8kr?file=/index.html

我对代码有一些问题，比如它不循环播放，每张幻灯片的持续时间不同，我在哪里出错了？

英文:

I want to implement a CSS/JS slider that should do the following

  1. There should be 2 or more div
  2. It should show the first div for 3 seconds on load, then the first div should get replaced with second, second with third and so on...
  3. Animation must come in a sequence (right, bottom, left, top...)
  4. Animation should be played in loop
  5. Each div must show for 3 seconds and then show the next slide

I have tried the following code: https://codesandbox.io/s/nostalgic-dewdney-lnz8kr?file=/index.html

I have few issues with the code such as, it does not play in loop, and there is a difference in duration of each slide, where am I going wrong here?

答案1

得分: 1

我会更改类。类似这样的：

  1. document.querySelectorAll('.slider-container').forEach(slider => {
  2.   const delay = Number(slider.dataset.delay) || 0;
  3.   const transitionDuration = Number(slider.dataset.transitionDuration) || 400;
  4.   let autoplayDelay = Number(slider.dataset.autoplayDelay) || 3000;
  5.   if (autoplayDelay - transitionDuration < 100) {
  6.     autoplayDelay = transitionDuration + 100;
  7.   }
  9.   const classes = ['from-right', 'from-bottom', 'from-left', 'from-top'];
  10.   let nextClassIndex = -1;
  12.   setTimeout(() => {
  13.     setTimeout(() => {
  14.       slide();
  15.       setInterval(slide, autoplayDelay);
  16.     }, autoplayDelay);
  17.   }, delay);
  19.   function slide() {
  20.     const activeSlide = slider.querySelector('.slide.active');
  21.     const nextSlide = activeSlide.nextElementSibling ?? slider.querySelector('.slide:first-child');
  22.     const animationClass = classes[nextClassIndex + 1];
  23.     nextClassIndex++;
  24.     if (nextClassIndex === classes.length - 1) {
  25.       nextClassIndex = -1;
  26.     }
  28.     classes.map(className => activeSlide.classList.remove(className));
  29.     activeSlide.style.removeProperty('transition-duration');
  30.     activeSlide.style.removeProperty('z-index');
  32.     nextSlide.classList.add(animationClass);
  33.     nextSlide.style.transitionDuration = transitionDuration + 'ms';
  34.     nextSlide.style.zIndex = 6;
  35.     nextSlide.classList.add('active');
  37.     setTimeout(() => nextSlide.classList.add('animated'), 100);
  38.     setTimeout(() => activeSlide.classList.remove('active', 'animated'), transitionDuration + 100);
  39.   }
  40. })
  1. .slider-container {
  2.   position: relative;
  3.   width: 200px;
  4.   height: 200px;
  5.   overflow: hidden;
  6. }
  8. .slide {
  9.   position: absolute;
  10.   inset: 0;
  11.   transition-property: transform;
  12.   will-change: transform;
  13.   display: none;
  14. }
  16. .slide.from-right {
  17.   transform: translateX(100%);
  18. }
  20. .slide.from-left {
  21.   transform: translateX(-100%);
  22. }
  24. .slide.from-top {
  25.   transform: translateY(-100%);
  26. }
  28. .slide.from-bottom {
  29.   transform: translateY(100%);
  30. }
  32. .slide.animated {
  33.   transform: none;
  34. }
  36. .slide.active {
  37.   display: block;
  38. }
  1. <div class="slider-container">
  2.   <div class="slide active" style="background-color: red;">0</div>
  3.   <div class="slide" style="background-color: blue;">1</div>
  4. </div>
  5. <div
  6.   class="slider-container"
  7.   data-delay="2000"
  8.   data-transition-duration="800"
  9. >
  10.   <div class="slide active" style="background-color: red;">0</div>
  11.   <div class="slide" style="background-color: blue;">1</div>
  12.   <div class="slide" style="background-color: green;">2</div>
  13.   <div class="slide" style="background-color: yellow;">3</div>
  14.   <div class="slide" style="background-color: brown;">4</div>
  15.   <div class="slide" style="background-color: red;">5</div>
  16.   <div class="slide" style="background-color: blue;">6</div>
  17.   <div class="slide" style="background-color: green;">7</div>
  18. </div>
英文:

I would change classes. Something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.querySelectorAll(&#39;.slider-container&#39;).forEach(slider =&gt; {
  2. const delay = Number(slider.dataset.delay) || 0;
  3. const transitionDuration = Number(slider.dataset.transitionDuration) || 400;
  4. let autoplayDelay = Number(slider.dataset.autoplayDelay) || 3000;
  5. if (autoplayDelay - transitionDuration &lt; 100) {
  6. autoplayDelay = transitionDuration + 100;
  7. }
  8. const classes = [&#39;from-right&#39;, &#39;from-bottom&#39;, &#39;from-left&#39;, &#39;from-top&#39;];
  9. let nextClassIndex = -1;
  10. setTimeout(() =&gt; {
  11. setTimeout(() =&gt; {
  12. slide();
  13. setInterval(slide, autoplayDelay);
  14. }, autoplayDelay)
  15. }, delay);
  16. function slide() {
  17. const activeSlide = slider.querySelector(&#39;.slide.active&#39;);
  18. const nextSlide = activeSlide.nextElementSibling ?? slider.querySelector(&#39;.slide:first-child&#39;);
  19. const animationClass = classes[nextClassIndex + 1];
  20. nextClassIndex++;
  21. if (nextClassIndex === classes.length - 1) {
  22. nextClassIndex = -1;
  23. }
  24. classes.map(className =&gt; activeSlide.classList.remove(className));
  25. activeSlide.style.removeProperty(&#39;transition-duration&#39;);
  26. activeSlide.style.removeProperty(&#39;z-index&#39;);
  27. nextSlide.classList.add(animationClass);
  28. nextSlide.style.transitionDuration = transitionDuration + &#39;ms&#39;;
  29. nextSlide.style.zIndex = 6;
  30. nextSlide.classList.add(&#39;active&#39;);
  31. setTimeout(() =&gt; nextSlide.classList.add(&#39;animated&#39;), 100)
  32. setTimeout(() =&gt; activeSlide.classList.remove(&#39;active&#39;, &#39;animated&#39;), transitionDuration + 100 );
  33. }
  34. })

<!-- language: lang-css -->

  1. .slider-container {
  2. position: relative;
  3. width: 200px;
  4. height: 200px;
  5. overflow: hidden;
  6. }
  7. .slide {
  8. position: absolute;
  9. inset:0;
  10. transition-property: transform;
  11. will-change: transform;
  12. display:none;
  13. }
  14. .slide.from-right {
  15. transform: translateX(100%);
  16. }
  17. .slide.from-left {
  18. transform: translateX(-100%);
  19. }
  20. .slide.from-top {
  21. transform: translateY(-100%);
  22. }
  23. .slide.from-bottom {
  24. transform: translateY(100%);
  25. }
  26. .slide.animated {
  27. transform: none;
  28. }
  29. .slide.active {
  30. display: block
  31. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;slider-container&quot;&gt;
  2. &lt;div class=&quot;slide active&quot; style=&quot;background-color: red;&quot;&gt;0&lt;/div&gt;
  3. &lt;div class=&quot;slide&quot; style=&quot;background-color: blue;&quot;&gt;1&lt;/div&gt;
  4. &lt;/div&gt;
  5. &lt;div
  6. class=&quot;slider-container&quot;
  7. data-delay=&quot;2000&quot;
  8. data-transition-duration=&quot;800&quot;
  9. &gt;
  10. &lt;div class=&quot;slide active&quot; style=&quot;background-color: red;&quot;&gt;0&lt;/div&gt;
  11. &lt;div class=&quot;slide&quot; style=&quot;background-color: blue;&quot;&gt;1&lt;/div&gt;
  12. &lt;div class=&quot;slide&quot; style=&quot;background-color: green;&quot;&gt;2&lt;/div&gt;
  13. &lt;div class=&quot;slide&quot; style=&quot;background-color: yellow;&quot;&gt;3&lt;/div&gt;
  14. &lt;div class=&quot;slide&quot; style=&quot;background-color: brown;&quot;&gt;4&lt;/div&gt;
  15. &lt;div class=&quot;slide&quot; style=&quot;background-color: red;&quot;&gt;5&lt;/div&gt;
  16. &lt;div class=&quot;slide&quot; style=&quot;background-color: blue;&quot;&gt;6&lt;/div&gt;
  17. &lt;div class=&quot;slide&quot; style=&quot;background-color: green;&quot;&gt;7&lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月5日 16:15:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76840717.html
  • animation
  • css
  • css-animations
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定