JavaScript实现图片滚动的方法：【var timer;var speed=10;var box=document.getElementById("box");var boxin=document.getEl...】。
本文操作环境：windows10系统、javascript 1.8.5、thinkpad t480电脑。
我们先来看看实现图片滚动效果的原理：
黑色盒子是最终显示滚动图像的区域，绿色盒子为其子容器，其宽度要大于黑色外层盒子，这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像，而紫色的盒子的内容将来将与蓝色盒子相同，以实现无缝的图像滚动。 通过JS的定时器每隔一定的时间，更改黑色盒子的scrollLeft属性的值，使图像向左进行滚动，同时判断scrollLeft的值，如果其值到达黑色盒子容器的最右侧时，说明蓝色盒子已经向左侧滚动出了黑色盒子，紫色盒子刚好全部位于黑色盒子内部。此时，需要将黑色盒子的scrollLeft的值设置为0，重新开始。
立即学习“Java免费学习笔记（深入）”；
具体实现代码：
html代码：
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@
css代码：
*{
margin: 0;
padding: 0;
}
#box{
height: 100px;
width: 500px;
overflow: hidden;
}
#boxin{
width: 1064px;
height: 100px;
}
#neirong{
float: left;
}
#neirong2{
float: left;
}
img{
width: 100px;
height: 100px;
}
js代码：
推荐学习：javascript视频教程
