首先看源代码：
<html>
<head>
<title>无缝滚动实例--左右滚动</title>
<style type="text/css">
img { border:none; margin:0px; }
#demo { width:600px; overflow:hidden; height:120px; border:solid 3px red; }
#demo1 { float:left; width:766px; }
#demo2 { float:left; width:766px; }
#clear { clear:both; }
</style>
</head>
<body>
<div id="demo">
<div id="marquee">
<div id="demo1">
<img src="images/js01.jpg" width="120" height="120" />
<img src="images/js02.jpg" width="120" height="120" />
<img src="images/js03.jpg" width="120" height="120" />
<img src="images/js04.jpg" width="120" height="120" />
<img src="images/js05.jpg" width="120" height="120" />
<img src="images/js06.jpg" width="120" height="120" />
</div>
<div id="demo2"></div>
</div>
</div>
<div id="clear"> </div>
<script type="text/javascript">
var speed = 10;
var demo = document.getElementById("demo");
var demo1= document.getElementById("demo1");
var demo2= document.getElementById("demo2");
var marquee = document.getElementById("marquee");
demo2.innerHTML = demo1.innerHTML;
marquee.style.width = demo1.offsetWidth * 2;
function fMarquee()
{
if(demo2.offsetWidth - demo.scrollLeft <= 0) { demo.scrollLeft -= demo2.offsetWidth; }
else { demo.scrollLeft++; }
}
var myMarquee = setInterval(fMarquee,speed);
demo.onmouseover = function() { clearInterval(myMarquee); }
demo.onmouseout = function() { myMarquee = setInterval(fMarquee, speed); }
</script>
</body>
</html>
代码结束。
基本原理与垂直滚动效果是一样的，只不过，在布局的时候发生了一点小小的改变。
他的结构应该是这样的
<div id="demo">
<div id="marquee">
<div id="demo1">
content...
</div>
<div id="demo2"></div>
</div>
</div>
用demo包含所有的内容。而且demo必须制定宽度和高度，且overflow:hidden;必须加上。其实demo指定的是滚动框的高度和宽度。
用marquee包含所有的内容，与demo不同的是，marquee的宽度是刚好够放下demo1与demo2的内容的（横向排列，所以需要float:left; 而且宽度要设置。）
接下来的是用javascript将marquee的宽度设置为两倍demo1的宽度。marquee.style.width = demo1.offsetWidth * 2; 以确保demo1与demo2是横向排列的。
在滚动时，若demo的scrollLeft已经到超过了demo2的宽度，说明应该重新开始了。用
if(demo2.offsetWidth - demo.scrollLeft <= 0) { demo.scrollLeft -= demo2.offsetWidth; }
else { demo.scrollLeft++; }
最后用var myMarquee = setInterval(fMarquee, speed) 重复滚动。
分享到：
相关推荐
JavaScript中实现无缝滚动、分享到侧边栏实例代码_.docx
在本篇文章里小编给大家分享的是关于javascript单张多张图无缝滚动实例代码和实例，需要的朋友们可以参考下。
javascript无缝滚动</title> <meta charset="utf-8" /> <meta name="keywords" content="javascript无缝滚动" /> <meta name="description" content="javascript无缝滚动" /> <style ...
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码，供大家参考，具体内容如下 首先应该区分样式中的绝对定位和相对定位，一般来说，移动的单位为绝对定位，在这个实例中，移动的Ul就是绝对定位 ，...
本文给大家分享一段实例代码有关js实现无缝滚动效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
主要介绍了原生JavaScript实现的无缝滚动功能,结合实例形式详细分析了JavaScript无缝滚动具体实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下
无缝滚动在制作一些图片展示的时候还是蛮有用的，下面与大家分享下javascript实现的可改变滚动方向的无缝滚动，具体实现如下，感兴趣的朋友可以参考下哈
js实现上下无缝滚动的原理是这样的： 1、首先给容器设定高度或宽度，然后overflow:hidden； 2、容器高度设定后，内容超出则被隐藏。 3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动一个节点的位置...
本文实例讲述了javascript实现的上下无缝滚动效果。分享给大家供大家参考，具体如下： 前面介绍了JS左右无缝滚动效果，现在做下无缝滚动——上下的效果。其他代码和左右的差不多，只是改变的是 offsetTop 的值，并且...
图片水平无缝滚动效果在大量的网站都有应用，特别是一些企业网站在展示产品的时候，因为是动态效果，所以能够给网站增色不少，相比静态图片展示更能够吸引用户的注意力，下面就通过实例代码介绍一下如何实现此效果。...
本文实例为大家分享了javascript实现文字无缝滚动的全部代码，供大家参考，具体内容如下 效果图： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta ...
下面一段代码给大家介绍js无缝滚动实例代码： 代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
本文实例讲述了JavaScript基于面向对象实现的无缝滚动轮播。分享给大家供大家参考，具体如下： 无缝轮播 面向对象 一、HTML及CSS部分同前文《原生JavaScript实现的无缝滚动功能》。 JavaScript面向对象部分如下： ...
主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
本文实例讲述了javascript实现的左右无缝滚动效果。分享给大家供大家参考，具体如下： 前面介绍过图片左右滚动，不过图片是间歇性的一张一张滚动，今天介绍的是几张图片一起进行无缝滚动，这是一个常用的 js 效果。 ...
本文主要介绍了javascript实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧