html如何做一个左右自动翻页的循环的公告显示栏

你可以使用HTML、CSS和JavaScript来实现左右自动翻页的循环的公告显示栏。以下是一个简单的实现：

HTML代码：

<div class="notice-container">
  <div class="notice-content">
    <p>公告1</p>
    <p>公告2</p>
    <p>公告3</p>
    <p>公告4</p>
  </div>
</div>

CSS代码：

.notice-container {
  width: 500px;
  height: 50px;
  overflow: hidden;
}

.notice-content {
  display: flex;
  animation: scroll 10s linear infinite;
}

.notice-content p {
  width: 500px;
  margin: 0;
  padding: 0 10px;
}

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

JavaScript代码：

// 获取公告内容和容器
const noticeContent = document.querySelector('.notice-content');
const noticeContainer = document.querySelector('.notice-container');

// 计算公告内容总宽度
const noticeContentWidth = noticeContent.offsetWidth;

// 复制一份公告内容并添加到容器末尾
const cloneNoticeContent = noticeContent.cloneNode(true);
noticeContainer.appendChild(cloneNoticeContent);

// 设置容器宽度为公告内容总宽度的两倍
noticeContainer.style.width = `${noticeContentWidth * 2}px`;

这段代码会将公告内容复制一份并添加到容器末尾，然后设置容器宽度为公告内容总宽度的两倍。接下来使用CSS的动画属性进行左右滚动，通过设置animation属性的infinite值为无限循环来实现循环翻页的效果。