JS to achieve seamless scrolling special effects _javascript skills

The example of this article introduces JS to achieve seamless scrolling effects need to do the function, as well as key JS code, share for everyone to reference, the specific content as follows

Run Effect chart:

Combined with the knowledge of the school, do a comprehensive simulation of the expansion exercise ~ ~ The general functions are as follows:

• 1, after the opening of HTML, picture automatic mobile display
• 2, click the direction, you can change the direction of the picture movement (change left value, plus or minus)
• 3, the mouse moved into the picture, the picture paused move (setinterval,clearinterval)
• 4, Mouse moved to the picture, highlighting (a:hover)
• 5, click on Small map, the following large image will change
• 6, the text area with the picture changes and changes (unsuccessful, need to improve)

Specific code:

Window.onload = function () {//Declaration part (now the custom is to write what statement, write it easy to forget it).

　　I don't know if it's okay. var odiv = document.getElementById (' box ');

　　var Oul = odiv.getelementsbytagname (' ul ');

　　var oLi = oul.getelementsbytagname (' li ');

　　var speed = 2;

　　　

　　var timer = null;

　　Let the content of the UL add one times, thus realize the seamless rolling oul.innerhtml = oul.innerhtml + oul.innerhtml;

　　OUl.style.width = oli[1].offsetwidth * oli.length + ' px ';
　　　　Move function function Move () {oUl.style.left = Oul.offsetleft + speed + ' px ';
　　　　Control left if (Oul.offsetleft <-OUL.OFFSETWIDTH/2) {oUl.style.left = 0;
　　　　//Control Right if (Oul.offsetleft > 0) {oUl.style.left =-oul.offsetwidth/2 + ' px ';
　　　　}//Icon Click to control move direction var oleft = document.getElementById (' Jt_left ');

　　　　var oright= document.getelementbyid (' jt_right ');
　　　　Oleft.onclick = function () {speed =-2;
　　　　} Oright.onclick = function () {speed = 2;
　　　　//mouse move out effect odiv.onmouseover = function () {clearinterval (timer); } Odiv.onMouseout = function () {timer = setinterval (move,20); 

　　　　Timer = setinterval (move,20);
　　　　Click to get large figure var AA = odiv.getelementsbytagname (' a ');
　　　　　　　　for (Var i=0;i<aa.length;i++) {Aa[i].onclick = function () {showpic (this);
　　　　　　return false;
　　　　　　} function Showpic (whichpic) {var source = Whichpic.href;
　　　　　　var placeholder = document.getElementById (' placeholder ');
　　　　PLACEHOLDER.SRC = source;
 }

}

The substitution effect of the last text, I would like to use the way the picture, so that the text box corresponding to the number of changes ~ ~ Results failed, do not know why, this aspect still need to be improved, I hope we can provide some good suggestions, but JS seamless scrolling or the normal realization of the hope for everyone can also help.