Realization of seamless rolling idea and code sharing _javascript technique based on JS

Principle:

1. give ul an absolute positioning make it out of the document flow, left set to 0, put the picture into the UL, write a "move" function, function function can make the left of the UL with a positive speed to the right running,

2. set a timer to allow the "move" function to execute once per 30 (variable) milliseconds

3. because the length of the UL will be "run", at this time can make the content of the UL is IMG increased by one times,

Oul.innerhtml +=oul.innerhtml;

4. because the content of the UL increases, the width will also increase, according to the actual project to show the number of pictures may change or uncertainty,

OUl.style.width = oli.length*oli[0].offsetwidth+ ' px ';

5. Add code to the "Move" function.

5.1 Right now the UL move, judge when the UL Offsetleft>0, the UL to Zola "half the width of the UL", that is to make the UL to the right has been unrestricted movement

if (oul.offsetleft>0) {
oUl.style.left =-oul.offsetwidth/2+ ' px ';

5.2 When the UL move to the left, its offsetleft ran the UL half width, the whole UL pull back to the initial left:0;

if (OUL.OFFSETLEFT<-OUL.OFFSETWIDTH/2) {
oUl.style.left = 0; 

Code on:

Html:

<div id= "box" >
<ul>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li> <li><a href=
"#" > </a></li>
<li><a href= "#" ></a> </li>
</ul>

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;}

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 start with a speed walk 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) {//negative number is because the left of UL is a negative number oUl.style.left = 0;} else if (OUL.O 
ffsetleft>0) {oUl.style.left =-oul.offsetwidth/2+ ' px '; } oUl.style.left = oul.offsetleft+ispeed+ ' px ';
Whole UL move Right}; 
var timer = null;
Clearinterval (timer);
Timer = setinterval (fnmove,30);
Oul.onmouseover = function () {clearinterval (timer);
Oul.onmouseout = function () {timer = setinterval (fnmove,30);/////////When mouse is moved, execute this timer};
}; </script> 

The above is a small set for everyone to share based on the JS seamless rolling ideas and code, hope to be able to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!