<body bgcolor="#669900" onLoad="a()">
<div id="all" style="width:500px; height:245px; margin:0 auto; overflow:hidden; border:1px #999999 solid;">
<div id="show1" style="width:2000px; height:245px; float:left;border:1px #000000 solid;">
<img src="test/1.jpg" border="0">
<img src="test/2.jpg" border="0">
<img src="test/3.jpg" border="0">
<img src="test/4.jpg" border="0">
<img src="test/5.jpg" border="0">
<img src="test/6.jpg" border="0">
<img src="test/7.jpg" border="0">
<img src="test/8.jpg" border="0">
<img src="test/9.jpg" border="0">
<img src="test/10.jpg" border="0">
</div>
</div>
<script type="text/javascript">
var al=document.getElementById('all');
var x;
function a()
{
if(al.scrollLeft>=1500)
{
al.scrollLeft--;
x=2;
}
else if(al.scrollLeft<=500)
{
al.scrollLeft++;
x= 1;
}
else
{
if(x==1)
al.scrollLeft++;
else
al.scrollLeft--;
}
var t=setTimeout('a()',10);
}
</script>
</body>
代码的实现主要在于
overflow:hidden;
和
al.scrollLef
属性
关于隐藏内容的处理方式
可以实现比较好的效果哦!