Any web page you open will basically see seamless scrolling or carousel images, such as Taobao and 360 official website homepage
By observing these carousel images, you can find that the pictures can be switched back and forth, so how do you do it?
There are two main ways to achieve carousel or seamless scrolling. One is to display or hide the picture by changing the light and darkness of the picture, that is, transparent pictures, and the other is to display the picture in the visible area through a moving frame. Both methods will use the same thing, that is, the timer.
There are two types of timers in JavaScript, 1.setInterval(); 2.setTimeout(); there are also two methods for closing timers, clearInterval() and clearTimeout(). The difference between the two timers is that the former can be executed multiple times, while the latter can be executed only once.
This time I will only talk about seamless scrolling, and the next article introduces the carousel picture.
The code to implement simple seamless scrolling is as follows:
/*Full code*/<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><style>div{position:relative;width:630px;height:220px;border:solid 2px black;overflow:hidden;}ul{position:absolute;top:10px;left:0;}img{width:200px;height:200px;float:left;margin-right:10px;border:2px solid yellow;}li{list-style:none;margin:0;padding:0;}ul{margin:0;padding:0;}</style><script>window.onload=function(){var oUl=document.getElementById("main");var aLi=oUl.getElementsByTagName("img");var oInput=document.getElementsByTagName("input")[0];oUl.innerHTML+=oUl.innerHTML;oUl.style.width=aLi.length*aLi[0].offsetWidth+"px";var timer=null;setInterval(function(){oUl.style.left=oUl.offsetLeft-8+"px";if(oUl.offsetLeft<-oUl.offsetWidth/2){oUl.style.left="0px";}},30);};</script></head><body><div><ul id="main"><li><img src="../img/1.jpg"></li><li><img src="../img/2.jpg"></li><li><img src="../img/2.jpg"></li><li><img src="../img/3.jpg"></li><li><img src="../img/3.jpg"></li><li><img src="../img/4.jpg"></li><li><img src="../img/9.jpg"></li></ul></div></div></body></html>/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------/
The seamless scrolling layout is relatively simple. The following mainly explains the JS content:
First, get ul and li respectively, then copy the content in ul, dynamically modify the width of ul through js (if you want to seamlessly scroll up and down, modify its width), and finally turn on the timer. In the code, ul moves 8 pixels to the left every 30 microseconds, and when the visible left margin of ul is less than half of the total length of ul, it becomes 0. Because the computer runs very quickly, this change is almost impossible to feel. All we see is the picture constantly moving to the left, endless movement.
The above is the seamless scrolling js code introduced to you by the editor. I hope it will be helpful to everyone!