JS无缝滚动实例：实现图片不间断循环显示

在JavaScript中实现图片的不间断连续滚动，是针对传统HTML `<marquee>` 元素的一个解决方案，因为`<marquee>`在滚动图片时会有明显的跳回起点的问题。通过编写JavaScript代码，我们可以模拟无缝滚动效果，让图片看起来像是无限循环地滚动。 首先，理解几个关键的DOM属性对于实现这种效果至关重要： 1. `innerHTML`：这个属性用于设置或获取HTML元素内部的内容，这对于动态加载新图片至关重要。 2. `scrollHeight` 和 `scrollWidth`：这两个属性分别返回元素的滚动高度和宽度，可以帮助我们计算图片滚动的距离。 3. `scrollTop` 和 `scrollLeft`：这两个属性用于设置或获取元素滚动的位置，滚动到顶部或底部时用于判断是否达到循环点。 4. `offsetHeight` 和 `offsetWidth`：这些属性提供了元素相对于视口的尺寸，用于定位图片。 接下来，我们可以通过以下步骤实现图片的无缝滚动： 1. HTML结构：创建一个包含多个图片的容器，如CSS样式所示： ```html <div id="demo"> <div id="demo1"> <a href="#"><img src="" border="0"></a> <!-- 重复添加更多图片 --> </div> </div> ``` 2. CSS布局：设置容器`#demo`为隐藏溢出内容、有边框和固定高度，使图片水平居中并浮动显示。 3. JavaScript逻辑： - 使用`setInterval`函数创建一个定时器，周期性地改变图片的`scrollTop`值，模拟滚动效果。 - 当`scrollTop`达到最大值时，不直接重置，而是通过减去`scrollHeight`来继续向下滚动，形成无缝效果。 - 使用`innerHTML`更新图片链接，每次滚动后加载下一张图片。 - 使用`offsetTop`确保图片保持在容器的可视区域内。 示例代码如下： ```javascript var demo = document.getElementById('demo'); var imgIndex = 0; var images = ['//www.jb51.net/other/link/Clear_logo.gif', ...]; // 图片URL列表 function loadNextImage() { demo.scrollTop = demo.scrollHeight; // 滚动到底部 demo.innerHTML = '<a href="#"><img src="' + images[imgIndex++] % images.length + '" border="0"></a>'; // 加载下一张图片 } // 设置初始滚动位置和定时器 demo.scrollTop = 0; setInterval(loadNextImage, 2000); // 每隔2秒滚动一次，时间可自定义 // 检查滚动到底部时，更新图片并保持滚动 window.onscroll = function() { if (demo.scrollTop + demo.offsetHeight >= demo.scrollHeight) { loadNextImage(); } }; ``` 通过这种方式，我们可以利用JavaScript来避免`marquee`滚动图片时的跳回问题，创建出平滑且连续的图片滚动效果。