In this article, we realize the effect of rolling advertising in pure JS mode for your reference. The specific content is as follows
Let's show the finished product first:
First of all, the web page style:
#demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; }The layout is as follows:
<div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="banner.jpg" /></a> <a href="#"><img src="banner2.jpg" /></a> </div> <div id="demo2"></div> </div> </div>
Specific JS implementation:
<script>var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("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>What to note here is:
scrollLeft represents the width of the page hidden to the left of the scrollbar when the page uses the scrollbar to scroll to the right.
offsetWidth is the visible width of the object, which wraps the scroll bar and is equal to the edges, which will change with the display size of the window.
The setInterval() method can call a function or calculate an expression according to the specified period (in milliseconds). The setInterval() method will keep calling the function until clearInterval() is called or the window is closed.
It’s easy to understand if you understand this specific implementation.
The implementation principle is as follows: first copy a copy of the content that needs to be scrolled. When the content displayed by the div on the right is the same width as the content hidden on the left shadow, the content hidden on the left shadow of the parent container is displayed, so that the content hidden on the left shadow is displayed and the content hidden on the right is rehidden. If the content on the right side displays less than the content hidden on the left side, continue to say that the parent container wants to move to the left to achieve hiding. One thing to note is that since two pictures are placed on the left side at the same time, when the right side is half displayed, the shadow hidden on the left side will be fully displayed. Because the content displayed on the right side is the same as the content on the left side, the effect of loop scrolling is achieved.
This smooth scrolling is achieved.
The above is all about this article, I hope it will be helpful to everyone's learning.