原生JS实现图片无缝滚动：横向与纵向完整代码示例

横向图片滚动效果实现

横向滚动效果通过设置容器样式实现。定义一个ID为demo的div元素，配置overflow为hidden以隐藏溢出内容，设定宽度为200px，添加#e0e0e0颜色的2px实线边框，并设置2px内边距。同时绑定onmouseover事件调用stopscroll函数，用于鼠标悬停时停止滚动。

在demo容器内部嵌套一个ID为demo1的div，设置white-space为nowrap防止换行，padding为0。内部包含图片链接元素，例如指向'发表新贴'的JavaScript弹窗链接，插入指定URL的图片，设置高度为20px，宽度为104px。

继续添加第二个图片链接元素，指向'发表回复'的JavaScript弹窗链接，同样插入指定URL的图片，设置高度为20px，宽度为104px，并设置border为0去除图片默认边框。

border=0></a> </div> </div> <!--滚动的javascript--> <script> var t=demo.scrollWidth demo1.innerHTML+=demo1.innerHTML function doMarquee() { demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth } function doscroll() { sc=setInterval(doMarquee,20) } function stopscroll() { clearInterval(sc) } doscroll() </script> <!--滚动的javascript结束-->

纵向图片滚动效果实现

纵向滚动效果同样通过div嵌套实现。定义ID为demo的div，设置高度为110px，overflow为hidden。内部嵌套ID为demo1的div，包含指向'发表新贴'的JavaScript弹窗链接及指定URL的图片，设置高度20px宽度104px。

继续添加指向'发表回复'的JavaScript弹窗链接及图片，设置高度20px宽度104px，border为0。

在demo1后添加ID为demo2的空div用于存放复制的内容。编写JavaScript脚本，定义speed变量为100。将demo1的innerHTML赋值给demo2。定义Marquees函数，判断demo2的offsetTop减去demo的scrollTop是否小于等于0，若是则从demo的scrollTop减去demo1的offsetHeight，否则scrollTop加1。使用setInterval每speed毫秒调用Marquees，并将结果赋值给MyMars。绑定demo的onmouseover事件清除MyMars定时器以暂停滚动，绑定onmouseout事件重新设置MyMars为setInterval调用Marquees并传入speed以恢复滚动。最后调用zlselect('6')。