Scroller 走马灯插件演示

向上滚动鼠标滚轮：内容向左滚动

向下滚动鼠标滚轮：内容向右滚动

功能说明

这是一个简单的走马灯效果插件，可以实现以下功能：

自动向右滚动显示内容
响应鼠标滚轮事件改变滚动方向
支持自定义滚动速度
无缝循环滚动效果

这是第一条新闻

这是第二条新闻

这是第三条新闻

使用方法

const scroller = new Scroller({
    container: document.querySelector('.scroll-container'),
    speed: 1,
    direction: 'right'
});
scroller.start();

参数说明

container: 容器元素，必填
speed: 滚动速度，默认值1
direction: 初始滚动方向，默认right

注意事项

1. 容器元素需要设置固定宽度或100%宽度

2. 内容元素会被自动克隆用于无缝滚动

3. 滚动方向会根据鼠标滚轮方向自动改变

示例代码

HTML结构：

<div class="scroll-container">
    <div class="scroll-item">内容1</div>
    <div class="scroll-item">内容2</div>
    <div class="scroll-item">内容3</div>
</div>