JavaScript实现无限循环左滚动图片

"JS不间断向左滚动是一种常见的网页动态效果，通过JavaScript实现图片或文本的自动循环滚动，常用于新闻资讯、广告展示等场景。此示例代码展示了一个简单的图片不间断向左滚动的效果，利用了HTML、CSS和JavaScript技术。" 在网页设计中，不间断向左滚动通常涉及到JavaScript的定时器（setTimeout或setInterval）和DOM操作。在这个例子中，主要知识点包括： 1. **HTML结构**：创建一个`<div>`元素作为滚动容器，设置`overflow:hidden`以隐藏超出可视区域的内容，`height`和`width`定义了滚动区域的大小。内部包含一个`<table>`，两行`<td>`，第一行`<td>`（id为`demo1`）放置要滚动的图片，第二行`<td>`（id为`demo2`）为空，用于复制`demo1`的内容以实现无缝滚动。 2. **CSS样式**：`background`和`color`属性定义了容器的背景颜色和文字颜色。`align=left`使图片靠左对齐。 3. **JavaScript变量**：`speed`变量定义了滚动速度，单位是毫秒，数值越大，滚动速度越慢。在这个例子中，速度设定为30毫秒。 4. **JavaScript函数**：`Marquee`函数是实现滚动的关键，它检查`demo2`的`offsetWidth`减去`scrollLeft`是否小于等于0，如果是，则将`scrollLeft`减去`demo1`的`offsetWidth`，否则递增`scrollLeft`，实现向左滚动的效果。 5. **事件监听**：通过`onmouseover`和`onmouseout`事件，当鼠标悬停在滚动区域时，停止滚动（清除定时器`MyMar`），鼠标离开时恢复滚动（重新设置定时器）。 6. **定时器`setInterval`**：`setInterval(Marquee, speed)`创建了一个定时器，每隔`spped`毫秒调用一次`Marquee`函数，实现了连续滚动的效果。 7. **DOM操作**：`demo2.innerHTML=demo1.innerHTML`这行代码将`demo1`的内容复制到`demo2`，确保在滚动到最后一张图片后可以从第一张开始无缝衔接。 总结来说，这个例子展示了如何使用JavaScript和DOM操作实现一个简单的不间断向左滚动的图片展示效果，同时通过鼠标悬停事件来控制滚动的暂停与恢复，提供了良好的用户体验。这种技术在网页设计中广泛应用于滚动新闻、滚动广告条等组件。