轮播图片在页面布局中运用广泛，下面是一个简单的示例：
示例代码：
<html> <head> <style type="text/css"> *{ margin:0px; padding:0px; } #outer{ width: 600px; overflow:hidden; } #inner{ width: 3000px; } img{ width:300px; float:left; } </style> </head> <body> <div id="outer"> <div id="inner"> <!--控制的其实是两个图片 外部outer的div的宽度是所控制图片的总宽度 --> <img src="1.jpg"/> <img src="2.jpg"/> <img src="1.jpg"/> <img src="2.jpg"/> </div> </div> <script> var s = setInterval(function(){ var outer = document.getElementById("outer"); if(outer.scrollLeft>=600){ outer.scrollLeft = 0; }else{ outer.scrollLeft+=2; } },10); </script> </body> </html>
注：这里只有两张图片在轮播，但实际上却放了四张图片，也就是说，同样的图片需要放两张，才能实现无缝隙轮播。
运行结果：
