JS实现图片的不间断连续滚动

【JS实现图片不间断连续滚动】 在网页设计中，经常需要创建动态效果来吸引用户的注意力，其中图片的连续滚动是一种常见的手法。传统的HTML标签`<marquee>`可以实现滚动效果，但对图片的处理并不理想，会出现明显的跳跃现象。本文将详细介绍如何使用JavaScript来实现图片的不间断连续滚动。 我们需要了解几个关键的JavaScript属性： 1. `innerHTML`: 这个属性用于设置或获取HTML元素内部的HTML内容。在实现滚动效果时，我们可以用它来复制和更新图片容器的内容。 2. `scrollHeight`: 获取一个元素的总高度，包括不可见部分，如滚动条。 3. `scrollLeft`和`scrollTop`: 分别用于设置或获取元素左边界和顶部与当前可视区域的距离。在滚动效果中，这两个属性用于调整元素的位置。 4. `scrollWidth`: 类似于`scrollHeight`，但用于获取元素的总宽度。 5. `offsetHeight`, `offsetLeft`, `offsetTop`, 和 `offsetWidth`: 这些属性提供元素相对于其offsetParent元素的偏移量，不考虑滚动条。在计算滚动位置时，它们是必不可少的。 以下是一个简单的向上滚动的例子： ```html <style> #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } </style> <div id="demo"> <div id="demo1"> <!-- 图片链接 --> </div> <div id="demo2"></div> </div> <script> var speed = 10; // 可调整滚动速度 var tab = document.getElementById("demo"); var tab1 = document.getElementById("demo1"); var tab2 = document.getElementById("demo2"); tab2.innerHTML = tab1.innerHTML; // 克隆 demo1 的内容到 demo2 function Marquee() { if (tab2.offsetTop - tab.scrollTop <= 0) // 当滚动至 demo1 与 demo2 交界时 tab.scrollTop -= tab1.offsetHeight; // demo 跳到最顶端 else tab.scrollTop++; // 慢慢滚动 } var MyMar = setInterval(Marquee, speed); // 开启定时器进行滚动 tab.onmouseover = function() { clearInterval(MyMar); // 鼠标移上时停止滚动 }; tab.onmouseout = function() { MyMar = setInterval(Marquee, speed); // 鼠标移开时恢复滚动 }; </script> ``` 这个例子中，我们创建了两个ID分别为`demo1`和`demo2`的`div`元素，`demo1`包含需要滚动的图片。`Marquee`函数负责实际的滚动逻辑，通过调整`scrollTop`属性使图片向上滚动。当`demo2`滚动到顶部时，我们将`demo1`的内容复制到`demo2`，形成一种无缝滚动的视觉效果。同时，我们通过`onmouseover`和`onmouseout`事件监听鼠标状态，以便在鼠标悬停时暂停滚动，鼠标离开时恢复滚动。 对于向下滚动的效果，基本原理与上述相同，只需要调整`scrollTop`的增加方向即可。在CSS样式中，可以调整`#demo`的`text-align`属性为`center`，使图片居中显示。在JavaScript代码中，将`Marquee`函数中的`tab.scrollTop--`改为`tab.scrollTop++`，图片就会从底部向上滚动。 通过这样的方式，我们可以实现更加平滑且可控的图片滚动效果，比传统的`<marquee>`标签更为灵活和友好。在实际应用中，可以根据需求调整滚动速度、添加动画效果，甚至支持多方向滚动，以满足各种网页设计的需求。