JavaScript完成图片滚动的办法：【<script>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，从头开始。
实际完成编码：
html编码：
<!\-\- 外层小盒子 --\>
<div id="box">
<div id="boxin">
<div id="neirong">
<img src="Images/C_2.jpg" alt="">
<img src="Images/C_3.jpg" alt="">
<img src="Images/C_4.jpg" alt="">
<img src="Images/C_5.jpg" alt="">
<img src="Images/C_6.jpg" alt="">
</div>
<div id="neirong2"></div>
</div>
</div>
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;
}
</style>js代码：
<script>
var timer;
var speed=10;
var box=document.getElementById("box");
var boxin=document.getElementById("boxin");
var neirong=document.getElementById("neirong");
var neirong2=document.getElementById("neirong2");
neirong2.innerHTML=neirong.innerHTML;
function move(){
if(neirong2.scrollWidth-box.scrollLeft<=0){
box.scrollLeft=0;
}else{
box.scrollLeft ;
}
}
box.onmouseover=function(){
clearInterval(timer);
}
box.onmouseout=function(){
timer=setInterval(move,speed);
}
timer=setInterval(move,speed);
</script>强烈推荐学习培训：javascript视频教学
以上就是关于JavaScript如何做到图片滚动的具体内容，大量欢迎关注AdminJS其他类似文章！