The example in this article uses js to achieve image scrolling with pause effect, controlled by buttons, for your reference. The specific content is as follows
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Seamless scroll 2</title> <style> #warp{ width: 1250px; height: 300px; overflow: hidden; margin:100px auto 0; overflow-x: auto; } #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; margin-right: 10px; width: 200px; height: 300px; } .btn{ text-align: center; margin-top: 10px; } .btn button{ font-size: 16px; } </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> <div> <button id="scrollL"><<scroll left</button> <button id="scrollR">Scroll right>></button> </div> <script> var warp=document.getElementById('warp'); var con=document.getElementById('con'); var box1=document.getElementById('box1'); var box2=document.getElementById('box2'); var img=box1.getElementsByTagName('img')[0]; var scrollL=document.getElementById('scrollL'); var scrollR=document.getElementById('scrollR'); var timer1=null,timer2=null,flage=1; box2.innerHTML=box1.innerHTML; max=box1.clientWidth; imgmax=img.clientWidth+10; function scrollLeft(){ flag=1; clearInterval(timer1); timer1=setInterval(function(){ warp.scrollLeft++; if (warp.scrollLeft>=max) { warp.scrollLeft=0; } if(warp.scrollLeft%imgmax==0){ clearInterval(timer1); clearTimeout(timer2); timer2=setTimeout(function(){ timer1=setInterval(scrollLeft,5) },2000) } },5) } function scrollRight(){ flag=0; clearInterval(timer1); timer1=setInterval(function(){ warp.scrollLeft--; if (warp.scrollLeft<=0) { warp.scrollLeft=max; } if(warp.scrollLeft%imgmax==0){ clearInterval(timer1); clearTimeout(timer2); timer2=setTimeout(function(){ timer1=setInterval(scrollRight,5) },2000) } },5) } scrollLeft(); scrollL.onclick=function(){ // clearInterval(timer1); // clearTimeout(timer2); scrollLeft(); } scrollR.onclick=function(){ // clearInterval(timer1); // clearTimeout(timer2); scrollRight(); } warp.onmouseenter=function(){ clearInterval(timer1); clearTimeout(timer2); } warp.onmouseleave=function(){ clearInterval(timer1); clearTimeout(timer2); console.log(flage); if (flage) {scrollLeft();} else{scrollRight();} } </script></body></html>The specific effect of this effect is to move the mouse up and scroll, and then scroll out. When scrolling, it is the scrolling of pictures one by one, that is, after scrolling one picture for 2 seconds, stop and start scrolling the next picture. Please refer to the code for the specific content.
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.