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> </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>If there are any errors, please correct them.
The above seamless scrolling simple implementation code (recommended) 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.