效果如下：（动态效果可复制代码查看，案例中的图片可自行选择添加）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
div{
position: relative;
width: 800px;
height: 200px;
border: 5px solid lightgreen;
margin:10px auto;
overflow: h
跑马灯效果是一种常见的网页动态效果，通常用于展示滚动的文字或图片。在本文中，我们将探讨如何使用原生JavaScript来实现这一效果。我们分析给出的代码结构和相关知识点。
1. HTML 结构：
- 页面包含一个 `div` 元素，设置了相对定位 (`position: relative`)，用于容纳跑马灯容器。
- `div` 内包含一个无序列表 `ul`，其设置了绝对定位 (`position: absolute`)，并设置 `left: 0` 和 `top: 0`，确保列表元素从左上角开始。
- 列表 `ul` 包含若干个 `li` 元素，每个 `li` 元素内包含一张图片。图片被设置为100%宽高，以适应容器大小。
2. CSS 样式：
- 使用通配符 `*` 清除默认边距和内边距，以及列表样式。
- `div` 的宽度、高度、边框和内边距用于定义跑马灯容器的外观。
- 设置 `overflow: hidden` 避免超出容器的部分显示，从而实现滚动效果。
3. JavaScript 部分：
- 获取 `ul` 元素，并通过 `getElementsByTagName('li')` 获取所有 `li` 元素。
- 将 `ul` 的内容复制并追加到其末尾，这是跑马灯循环的关键，使得最后一个元素能够滑动到最前面。
- 计算 `ul` 的总宽度为 `lis.length * lis[0].offsetWidth`，以便在JavaScript中设置正确的宽度。
- 定义变量 `left` 用于跟踪 `ul` 的左偏移量，初始值设为 `null`。
- 使用 `setInterval` 函数定时更新 `ul` 的 `left` 属性，使其向左平移。当 `left` 小于 `-oUl.offsetWidth/2` 时，将 `left` 重置为 0，实现无限循环的效果。
4. 动态效果：
- 每隔10毫秒，`ul` 就会向左移动3像素，这可以通过调整 `setInterval` 函数的第二个参数（时间间隔）来改变滚动速度。
- 图片会在容器内部水平流动，形成连续滚动的视觉效果。
总结起来，这个原生JS实现的跑马灯效果主要依赖HTML的布局和CSS的定位，以及JavaScript的定时器功能来完成动态滚动。通过理解和应用这些基本概念，我们可以创建出各种自定义的跑马灯效果，比如改变滚动方向、增加动画过渡等。在实际项目中，还可以考虑优化性能，如使用 requestAnimationFrame 替换 setInterval，或者添加暂停和恢复功能。
