7月7日 17:06
要在 Shopify 页眉中设置多条滚动轮播的公告，你可以使用 JavaScript 和 CSS 来实现。下面是一种实现方式：
1. 首先，在你的 Shopify 主题中的适当位置插入以下 HTML 代码，用于创建轮播容器和滚动内容：
```html
公告1
公告2
公告3
```
2. 接下来，在你的主题的 CSS 文件中添加以下样式：
```css
#announcement-carousel {
height: 20px; /* 调整这个高度以适应你的公告样式 */
overflow: hidden;
}
#announcement-list {
margin: 0;
padding: 0;
list-style: none;
animation: scroll-announcements 10s linear infinite;
}
#announcement-list li {
display: inline-block;
padding-right: 40px; /* 调整这个间距以适应你的公告样式 */
white-space: nowrap;
}
```
3. 然后，在你的主题的 JavaScript 文件中添加以下代码：
```javascript
// 获取滚动容器和公告列表
var carousel = document.getElementById('announcement-carousel');
var list = document.getElementById('announcement-list');
// 复制公告列表项并添加到末尾
var items = list.getElementsByTagName('li');
while (true) {
var itemCount = items.length;
for (var i = 0; i < itemCount; i++) {
list.appendChild(items[i].cloneNode(true));
}
break;
}
```
这段 JavaScript 代码通过复制公告列表项并将其添加到公告列表末尾，以实现循环滚动的效果。
在上述代码中，你需要根据自己的实际需求和样式调整 CSS 中的高度、间距等属性，以及 JavaScript 中的选择器和变量名称。此外，你还可以根据需要自定义动画的持续时间和缓动函数。
完成以上步骤后，保存并更新你的 Shopify 主题，重新加载页面，你应该能够看到多条公告以滚动轮播的方式在页眉中显示。