js replaces marquee to achieve seamless scrolling of pictures
Maybe everyone has encountered this. When the picture is scrolling in marquee, when it is scrolled to the end, it jumps back to the starting point, rather than scrolling seamlessly like text. The following is to realize seamless scrolling of pictures through js.
Let’s first understand the following attributes:
innerHTML: Set or get HTML located in the object's start and end tags
scrollHeight: Gets the scroll height of the object.
scrollLeft: Set or get the distance between the left boundary of the object and the leftmost end of the currently visible content in the window
scrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
scrollWidth: Get the scroll width of the object
offsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property
offsetLeft: Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent property
offsetTop: Gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop property
offsetWidth: Gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Pictures scroll upward seamlessly
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;height: 100px;text-align: center;float: left;}#demo img {border: 3px solid #F2F2F2;display: block;}--></style>Scroll up<div id="demo"><div id="demo1"><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demo2"></div></div><script><!--var speed=10; //The larger the number, the slower the speed var tab=document.getElementByIdx_x("demo");var tab1=document.getElementByIdx_x("demo1");var tab2=document.getElementByIdx_x("demo2");tab2.innerHTML=tab1.innerHTML; //Clone demo1 as demo2function Marquee(){if(tab2.offsetTop-tab.scrollTop<=0)//When scrolling to the junction of demo1 and demo2 tab.scrollTop-=tab1.offsetHeight //Demo jumps to the top else{tab.scrollTop++}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};//When the mouse is moved up, the timer is cleared to achieve the purpose of scrolling stop tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//When the mouse is moved away, the timer is reset--></script>Pictures scroll seamlessly downward
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;height: 100px;text-align: center;float: left;}#demo img {border: 3px solid #F2F2F2;display: block;}--></style>Scroll down<div id="demo"><div id="demo1"><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demo2"></div></div><script><!--var speed=10; //The larger the number, the slower the speed var tab=document.getElementByIdx_x("demo");var tab1=document.getElementByIdx_x("demo1");var tab2=document.getElementByIdx_x("demo2");tab2.innerHTML=tab1.innerHTML; //Clone demo1 is demo2tab.scrollTop=tab.scrollHeightfunction Marquee(){if(tab1.offsetTop-tab.scrollTop>=0)//When scrolling to the junction of demo1 and demo2 tab.scrollTop+=tab2.offsetHeight //Demo jumps to the top else{tab.scrollTop--}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};//When the mouse is moved up, clear the timer to achieve the purpose of scrolling stop tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//When the mouse is moved away, reset the timer--></script>Pictures scroll seamlessly to the left
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}--></style>Scroll left<div id="demo"><div id="indemo"><div id="demo1"><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demo2"></div></div><script><!--var speed=10; //The larger the number, the slower the speed var tab=document.getElementByIdx_x("demo");var tab1=document.getElementByIdx_x("demo1");var tab1=document.getElementByIdx_x("demo1");var tab2=document.getElementByIdx_x("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script>Pictures scroll seamlessly to the right
<style type="text/css"><!--#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;}#demo img {border: 3px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}--></style>Scroll right<div id="demo"><div id="indemo"><div id="demo1"><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demo2"></div></div><script><!--var speed=10; //The larger the number, the slower the speed var tab=document.getElementByIdx_x("demo");var tab1=document.getElementByIdx_x("demo1");var tab1=document.getElementByIdx_x("demo1");var tab2=document.getElementByIdx_x("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab.scrollLeft<=0)tab.scrollLeft+=tab2.offsetWidthelse{tab.scrollLeft--;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script>Finally, if someone wants to have two scrolling picture sets on a page, one to the left and the other to the right, then the one below can be used. I added all js to i, and css
Scroll to the right
<div id="demoi"><div id="indemoi"><div id="demoi1"><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a><a href="#"><img src="//www.VeVB.COM/other/link/Clear_logo.gif" /></a></div><div id="demoi2"></div></div><script><!--var speedi=10; //The larger the number, the slower the speed var tabi=document.getElementByIdx_x("demoi");var tabi1=document.getElementByIdx_x("demoi1");var tabi2=document.getElementByIdx_x("demoi2");tabi2.innerHTML=tabi1.innerHTML;function Marqueei(){if(tabi.scrollLeft<=0)tabi.scrollLeft+=tabi2.offsetWidthelse{tabi.scrollLeft--;}}var MyMari=setInterval(Marqueei,speedi);tabi.onmouseover=function() {clearInterval(MyMari)};tabi.onmouseout=function() {MyMari=setInterval(Marqueei,speedi)};--></script>The above simple example of JS realizing uninterrupted continuous scrolling of pictures is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.