JS Stage Small Exercise ~ seamless scrolling

Combined with the knowledge of the school, do a simulation of the comprehensive extension exercise ~ ~ The following functions:

1. After opening the HTML, the picture automatically moves the display

2, click Left and right direction, you can change the direction of the movement of the picture (the value of change, plus or minus)

3, the mouse moved into the picture, the picture suspended movement (Setinterval,clearinterval)

4. Move the mouse over the image, highlight (a:hover)

5, click the Small map, the following large map will change

6. The text area changes with the picture (unsuccessful)

-----------------------------------------------------JS Code-----------------------------------------------------------------

Window.onload = function () {

The statement section (now the habit is to write what statement what, together write easy to forget. I don't know if it's good or bad.

var odiv = document.getElementById (' box ');

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

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

var speed = 2;

var timer = null;

　　　

Increase the content of UL by one-fold, so as to achieve seamless scrolling

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 ~ Control the direction of movement

var oleft = document.getElementById (' Jt_left ');
var oright= document.getelementbyid (' jt_right ');

Oleft.onclick = function () {
Speed =-2;
}

Oright.onclick = function () {
Speed = 2;
}

Mouse move in and out effect

Odiv.onmouseover = function () {
Clearinterval (timer);
}

Odiv.onmouseout = function () {
Timer = setinterval (move,20);
}
Timer = setinterval (move,20);

Click for larger image

　　　　

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

}

-----------------------------------------------------Split Line----------------------------------------------------

The final text to replace the effect of the way you want to use the picture, so that the text box corresponding to the number of changes ~ ~ The result is not successful, do not know why (alone can, write in function will fail)

The alternative effect is to make a big picture and a text box in one piece. This is possible, but the maintenance of the poor, can only say that the results can be ...

There is another way is the big picture onmouseover, but in this way, the picture and text content will not be adjusted, if not moved to the above will not show ~ ~ Effect than the first kind of worse ~ ~

Slowly come, learn the next, hope to solve this piece ~ ~

Write more messy, HTML and CSS will not stick up ~ ~ Refueling.

JS Stage Small Exercise ~ seamless scrolling