js滚动图片怎么做,js图片滑动

　　运行环境：Windows S10系统，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

　　/divcss代码：

　　*{

　　边距：0；

　　填充：0；

　　}

　　#框{

　　高度：100px

　　宽度：500px

　　溢出：隐藏；

　　}

　　#boxin{

　　宽度：1064px

　　高度：100px

　　}

　　#neirong{

　　浮动：左；

　　}

　　#neirong2{

　　浮动：左；

　　}

　　img{

　　宽度：100px

　　高度：100px

　　}

　　/stylejs代码：

　　脚本

　　var定时器；

　　var速度=10；

　　var box=document . getelementbyid( box )；

　　var boxin=document . getelementbyid( boxin )；

　　var ne irong=document . getelementbyid( ne irong )；

　　var ne irong 2=document . getelementbyid( ne irong 2 )；

　　ne irong 2 . innerhtml=ne irong . innerhtml；

　　函数move(){

　　if(nei Rong 2 . scroll width-box . scroll left=0){

　　box . scroll left=0；

　　}否则{

　　box.scrollLeft

　　}

　　}

　　box.onmouseover=function(){

　　clearInterval(定时器)；

　　}

　　box.onmouseout=function(){

　　timer=setInterval(移动，速度)；

　　}

　　timer=setInterval(移动，速度)；

　　/script推荐学习：javascript视频教程以上是JavaScript如何滚动图片的细节。请多关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。