【走马灯轮播图进阶】JS和CSS3的华丽舞步

2023-05-18 16:09:29

走马灯轮播图：点燃页面视觉盛宴

导语

在当今竞争激烈的数字景观中，引人入胜的视觉效果对于提升用户体验和促进互动至关重要。走马灯轮播图脱颖而出，成为一种展示引人注目的图像和内容的有效方式。本文将深入探讨走马灯轮播图的技术细节，包括 CSS3 动画和 JS 定时器，并提供进阶技巧和最佳实践，帮助您创建令人惊叹的视觉效果。

CSS3 动画：简化动画

CSS3 动画以其简洁性和广泛的兼容性而著称。通过寥寥几行代码，即可让元素动起来。关键帧规则是 CSS3 动画的核心，它定义了动画的起始和终止状态，以及中间的过渡过程。您可以控制动画的持续时间、延迟、播放次数和方向，以及应用各种变换属性，例如位移、旋转和缩放。

代码示例：左右滚动走马灯

<div class="carousel">
  <ul>
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
  </ul>
</div>

.carousel {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel ul {
  display: flex;
  width: 400%;
  animation: scroll 30s infinite linear;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JS 定时器：灵活的动画控制

JS 定时器提供了更灵活的动画控制，可以实现更复杂的动画效果。setInterval() 方法创建了一个循环定时器，在指定的时间间隔内重复执行指定的任务。您可以使用它来平滑地移动元素、调整属性并创建自定义的动画序列。

代码示例：上下滚动走马灯

<div class="carousel">
  <ul>
    <li><img src="image1.jpg" alt=""></li>
    <li><img src="image2.jpg" alt=""></li>
    <li><img src="image3.jpg" alt=""></li>
  </ul>
</div>

var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var carouselHeight = carousel.offsetHeight;
var currentSlideIndex = 0;

setInterval(function() {
  carouselUl.style.top = -carouselHeight * currentSlideIndex + 'px';
  currentSlideIndex++;
  if (currentSlideIndex >= carouselLis.length) {
    currentSlideIndex = 0;
  }
}, 3000);