3分钟搞定走马灯效果，让你Web界面瞬间丰富起来！

前端

2022-12-03 10:56:38

制作令人惊叹的网页走马灯效果：分步指南

在当今竞争激烈的数字世界中，吸引访客并为他们提供引人入胜的体验至关重要。网页走马灯效果就是实现这一目标的强大工具。走马灯效果，顾名思义，就像传统的走马灯，它将内容连续滚动或滑动，吸引注意力并增强交互性。

走马灯效果的秘密

制作网页走马灯效果需要了解其背后的核心技术：

HTML结构： 为走马灯内容创建容器元素，如<div>或<ul>。
CSS样式： 设定容器元素的尺寸、位置和溢出属性，并为走马灯内容添加动画效果。
JavaScript脚本： 控制走马灯的滚动或滑动，以及切换动画。

制作走马灯效果的分步指南

准备好文本编辑器和浏览器，让我们开始吧！

步骤1：建立HTML骨架

<div id="marquee-container">
  <!-- 走马灯内容 -->
</div>

步骤2：添加CSS风格

#marquee-container {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

#marquee-container ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  animation: marquee 10s linear infinite;
}

#marquee-container ul li {
  padding: 10px;
  margin: 0 10px;
  background-color: #ccc;
}

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

步骤3：添加JavaScript脚本

const marqueeContainer = document.getElementById('marquee-container');
const marqueeList = marqueeContainer.querySelector('ul');
const marqueeItems = marqueeList.querySelectorAll('li');

let currentItem = 0;

function moveMarquee() {
  if (currentItem >= marqueeItems.length - 1) {
    currentItem = 0;
  } else {
    currentItem++;
  }

  marqueeList.style.transform = `translateX(-${currentItem * 100}%)`;
}

setInterval(moveMarquee, 3000);