JS Basic Tutorial Four seamless scrolling

In front of the relevant JS to learn some basic knowledge, this section is mainly for the timer for comprehensive use:

Seamless Scrolling-Basics

Effect Demo:

* Fundamentals of Object Movement

* Let the div move.

The role of *offsetleft

* Use timers to move objects continuously

<style type= "Text/css" > #div1 {width:100px; height:100px; background: #CCC; margin-top:10px; position:absolute; left:0px;} </style><script type= "Text/javascript" >window.onload=function () {var begin = document.getElementById (" Begin "), var Stopp = document.getElementById (" Stopp "), var div1 = document.getElementById (" Div1 "); var timer = null; Begin.onclick = function () {    timer = setinterval (function () {    div1.style.left = div1.offsetleft + 5 + "px";     }, );             alert (div1.offsetleft);   Returns 0             ////when using offsetleft, be sure to set its left in the CSS, otherwise it will be a null value, and the corresponding Position};stopp.onclick = function () {        Cleartimeout (timer);}; </script>
--Effect principle
Let ul keep moving to the left
Copy Li
A), innerHTML and + "
b), modify the width of the UL
Reset position after scrolling over bounds
a). Judgment over Bounds
Related code:
<style type= "Text/css" > #div1 {width:100px; height:100px; background: #CCC; margin-top:10px; position:absolute; left:0px;}. roll{width:400px; height:120px; margin:50px auto 0; position:relative;} img{width:100px; height:100px; border: #FC9 1px s Olid;}. btnleft {display:block; width:30px; height:30px; Background:url (pic/pagepre.png) no-repeat 12px 10px; Position: Absolute top:50px; left:1px; z-index:1px; }.btnleft:hover {background:url (pic/pagepre.png) no-repeat 12px 9px;}. btnright{display:block; width:30px; height:30px; Background:url (pic/pagenext.png) no-repeat 1px 16px; Position: Absolute top:50px; right:0; Z-index:1;}. Btnright:hover {background:url (pic/pagenext.png) no-repeat 1px 15px;}. Warp {width:400px; height:120px; margin:0 auto; position:relative; overflow:hidden;} ul{list-style-type:none; position:absolute;} li{float:left; width:100px; height:100px; text-align:center;}                                                  </style><script type= "Text/javascript" >                   Window.onload=function () {var odiv= document.getelementbyid ("roll"); var OUI = Document.getelementsbytag Name ("ul") [0];var oLi = document.getElementsByTagName ("li");//var oleft = document.getElementById ("left"); Left button//var oright = document.getElementById ("right");    Right button var wapdiv = document.getElementById ("wap"); var timer = Null;var Isspeed =-5;    oui.innerhtml + = oui.innerhtml; OUI.style.width = oli[0].offsetwidth * oli.length + "px";    The timer = setinterval (function margin () {oUI.style.left = Oui.offsetleft + isspeed + "px"; if (Oui.offsetleft <-OUI.OFFSETWIDTH/2) {oUI.style.left = ' 0px ';}    else if (Oui.offsetleft > 0) {oUI.style.left =-OUI.OFFSETWIDTH/2;} },30) Wapdiv.onmouseout = function ()//mouse on {timer = setinterval (function margin () {oUI.style.left = Oui.offsetlef    T + isspeed + "px"; if (Oui.offsetleft <-OUI.OFFSETWIDTH/2) {oUI.style.left = ' 0px ';} else if (Oui.offsetleft > 0) {oUI.style.left =-ouI.OFFSETWIDTH/2;} },30);}; Wapdiv.onmouseover = function ()//mouse removal {cleartimeout (timer);};
<div class= ' roll ' id= ' roll ' ><a href= ' javascript:void (0); "id=" left "class=" Btnleft "></a><a href = "Javascript:void (0);" id= "right" class= "Btnright" ></a><div id= "wap" class= "warp" > <ul>  <li>  </li>  <li>  </li>  < li>  </li>  <li>  </li>  <li >  </li>  <li>  </li>  <li>  </li>  <li>  </li></ul></div ></div>
Left-to-right function is still to be perfected, just change the isspeed=5; the parameter, here only the mouse moves in the move Out event, similar:
JS Basic Tutorial Four seamless scrolling