The examples in this article share the code for implementing js seamless scrolling effect for your reference. The specific content is as follows
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Seamless scroll</title> <style> #warp{ width: 1200px; height: 300px; overflow: hidden; margin:100px auto 0; } #warp #con{ width: 4000px; height: 300px; overflow: hidden; } #warp #con #box1{ float: left; overflow: hidden; } #warp #con #box2{ float: left; overflow: hidden; } #warp img{ float: left; width: 200px; height: 300px; } </style></head><body> <div id="warp"> <div id="con"> <div id="box1"> <img src="images/meinv1.jpg"> <img src="images/meinv2.jpg"> <img src="images/meinv3.jpg"> <img src="images/meinv4.jpg"> <img src="images/meinv5.jpg"> <img src="images/meinv6.jpg"> </div> <div id="box2"></div> </div> </div> <script> var warp=document.getElementById('warp'); var con=document.getElementById('con'); var box1=document.getElementById('box1'); var box2=document.getElementById('box2'); // box2.innerHTML=box1.innerHTML; var timer1=null,x=0; function scroll(){//Scroll function box2.innerHTML=box1.innerHTML; timer1=setInterval(function(){ x++; if (x>=box1.clientWidth) { x=0; warp.scrollLeft=x; } warp.scrollLeft=x; },10) } scroll(); warp.onmouseenter=function(){ clearInterval(timer1); } warp.onmouseleave=function(){ scroll(); } </script></body></html>The main idea of this effect is that the width of the content part of the picture should be much larger than the width of the area to be displayed, so that the scroll bar will appear. Copy the content of the previous group of pictures to make it seamless scrolling in the effect. Please refer to the code for details.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.