制作一个公告滚动的代码
时间: 2023-03-22 16:01:53 浏览: 65
您好!以下是一个简单的HTML和JavaScript代码,可以制作一个公告滚动:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公告滚动</title>
<style>
#notice {
height: 50px;
overflow: hidden;
background-color: #f2f2f2;
padding: 10px;
margin-bottom: 20px;
}
#notice p {
margin: 0;
padding: 5px;
line-height: 40px;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div id="notice">
<p>这里是公告内容1</p>
<p>这里是公告内容2</p>
<p>这里是公告内容3</p>
</div>
<script>
var noticeIndex = 0;
var noticeTimer = setInterval(function() {
var notices = document.querySelectorAll("#notice p");
notices[noticeIndex].style.display = "none";
noticeIndex++;
if (noticeIndex >= notices.length) {
noticeIndex = 0;
}
notices[noticeIndex].style.display = "block";
}, 2000);
</script>
</body>
</html>
```
您可以将公告内容替换为您自己的内容,并调整样式和滚动速度。希望能对您有所帮助!