principle:
1. Give ul an absolute position to make it separate from the document stream, set left to 0, stuff the picture into ul, write a "moving" function, the function function can make ul's left run to the right at a positive speed,
2. Set a timer to make the "moving" function execute every 30 milliseconds (variable parameters)
3. Because the length of ul will be "run", the content of ul, that is, img, can be doubled.
oUl.innerHTML +=oUl.innerHTML;
4. At this time, because the content of ul increases, its width will also increase, and the number of pictures displayed may change or be uncertain according to the actual project.
oUl.style.width = oLi.length*oLi[0].offsetWidth+'px';
5. Add code to the "moving" function.
5.1 At this time, ul moves to the right. When ul's offsetLeft>0, pull ul to the left "half the width of ul", that is, enable ul to move to the right without limit.
if(oUl.offsetLeft>0){oUl.style.left = -oUl.offsetWidth/2+'px';}5.2 When ul moves to the left and its offsetLeft runs half of the width of ul, pull the entire ul back to the initial left: 0;
if (oUl.offsetLeft<-oUl.offsetWidth/2) {oUl.style.left = 0; }On code:
html:
<div id="box"><ul><li><a href="#"><img src="1.jpg" /></a></li><li><a href="#"><img src="2.jpg" /></a></li><li><a href="#"><img src="2.jpg" /></a></li><li><a href="#"><img src="3.jpg" /></a></li><li><a href="#"><img src="4.jpg" /></a></li></ul></div>
css:
* {margin: 0;padding: 0;}#box{ width: 480px; height: 110px; border: 1px red solid; margin: 100px auto; overflow: hidden; position: relative; }#box ul{ position: absolute; left: 0; top: 5px;}#box ul li{list-style: none; float: left; width: 100px; height: 100px; padding-left: 16px; }#box ul li img{width: 100px; height: 100px;}js:
<script>window.onload = function(){var oDiv = document.getElementById('div1');var oUl = oDiv.getElementsByTagName('ul')[0];var oLi = oUl.getElementsByTagName('li');var aA = document.getElementsByTagName('a');var iSpeed = 10; //Let ul have a speed to move oUl.innerHTML +=oUl.innerHTML; oUl.style.width = oLi.length*oLi[0].offsetWidth+'px'; aA[0].onclick = function(){iSpeed = -10;};aA[1].onclick = function(){iSpeed = 10;};function fnMove(){if (oUl.offsetLeft<-oUl.offsetWidth/2) { //The negative number is because ul's left is a negative number oUl.style.left = 0;}else if(oUl.offsetLeft>0){ oUl.style.left = -oUl.offsetWidth/2+'px'; } oUl.style.left = oUl.offsetLeft+iSpeed+'px'; //The whole ul moves to the right};var timer = null; clearInterval(timer);timer = setInterval(fnMove,30);oUl.onmouseover = function(){clearInterval(timer);};oUl.onmouseout = function(){timer = setInterval(fnMove,30); //Execute this timer when the mouse is moved away};};</script>The above is the JS-based seamless scrolling ideas and code shared by the editor. I hope it can help you. If you have any questions, please leave me a message. The editor will reply you in time. Thank you very much for your support for the Wulin Network website!