<div id="announcement-board">
    <ul id="announcement-list">
        <li>公告一：网站将于本周末进行系统维护。</li>
        <li>公告二：新用户注册可获得 10 元优惠券。</li>
        <li>公告三：限时折扣活动正在进行中。</li>
    </ul>
</div>

接下来使用 CSS 进行样式设计。CSS 可以让公告栏的外观更加吸引人。为公告栏容器设置宽度、高度、边框、背景颜色等属性，让其在页面中显示出合适的位置和样式。对于无序列表，去除默认的列表样式，设置字体大小、颜色等。例如：

#announcement-board {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    overflow: hidden;
}
#announcement-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#announcement-list li {
    font-size: 14px;
    line-height: 30px;
}

最后借助 jQuery 实现自动滚动功能。jQuery 提供了便捷的方法来操作 DOM 元素和处理事件。我们可以使用 animate() 方法来实现公告的滚动效果。以下是示例代码：

$(document).ready(function() {
    setInterval(function() {
        $('#announcement-list li:first').animate({
            marginTop: '-30px'
        }, 500, function() {
            $(this).detach().appendTo('#announcement-list');
            $(this).css('marginTop', '0');
        });
    }, 3000);
});

这段代码中，setInterval() 函数每隔 3 秒执行一次滚动操作。animate() 方法使第一个公告项向上滚动 30 像素，完成后将其从列表开头移除并添加到列表末尾，同时重置其 marginTop 属性，实现循环滚动效果。

通过 HTML 搭建结构、CSS 美化样式、jQuery 赋予交互功能，一个自动滚动公告栏就打造完成了。这种结合方式不仅能满足实际需求，还能为网页增添动态交互性，提升用户体验。