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免费学习笔记（深入）”；
具体实现代码：
改图鸭AI图片生成
改图鸭AI图片生成
30 查看详情
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代码：
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);
推荐学习：javascript视频教程
以上就是JavaScript如何实现图片滚动的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/558693.html
微信扫一扫 
支付宝扫一扫 
