横向滚动新闻栏

横向滚动新闻栏是一种常见的网页设计元素，它通常用于在页面的顶部或底部实现新闻、资讯等内容的滚动展示。在本文中，我们将介绍如何使用HTML、CSS和JavaScript创建一种基本的横向滚动新闻栏。

HTML

首先，我们需要在HTML中创建一个容器元素，用于承载我们的新闻栏。我们还需要在其中添加一个无序列表元素，用于包裹新闻项。

<div class="news-ticker">
  <ul class="news-items">
    <li class="news-item">最新资讯1</li>
    <li class="news-item">最新资讯2</li>
    <li class="news-item">最新资讯3</li>
    <li class="news-item">最新资讯4</li>
    <li class="news-item">最新资讯5</li>
  </ul>
</div>

CSS

接下来，我们使用CSS样式来定义我们的新闻栏。我们将使用flexbox布局来使得新闻项能够横向排列，并设置了一些常用的样式，例如字体大小、颜色和背景颜色等。

.news-ticker {
  background-color: #f5f5f5;
  display: flex;
  overflow: hidden;
}

.news-items {
  display: flex;
  margin: 0;
  padding: 0;
  animation: scrolling 10s linear infinite;
  white-space: nowrap;
}

.news-item {
  font-size: 14px;
  color: #333;
  background-color: #f5f5f5;
  margin-right: 20px;
  padding: 10px;
}

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

在上面的代码中，我们使用了动画效果来实现横向滚动。通过使用 translateX() 函数，我们可以在水平方向上对元素进行移动。

JavaScript

最后，我们使用JavaScript来动态添加新闻项，使得滚动新闻栏能够动态地展示最新的新闻。

const newsTicker = document.querySelector('.news-ticker');
const newsItems = newsTicker.querySelector('.news-items');

setInterval(() => {
  const listItem = document.createElement('li');
  listItem.classList.add('news-item');
  listItem.innerText = '最新资讯' + (newsItems.children.length + 1);
  newsItems.appendChild(listItem);
}, 3000);

在上面的代码中，我们使用了 setInterval() 函数来定时生成新的新闻项。每隔3秒钟，就会创建一个新的新闻项，并将其添加到 newsItems 列表中。

结论

通过 HTML、CSS 和 JavaScript 的组合，我们可以轻松地创建出一个简单的横向滚动新闻栏。当然，我们的示例只是最基本的实现，您可以根据自己的需要来拓展和优化它。