JavaScript realizes picture Carousel effect (二) The control of the image sequence node realizes _javascript skill

Recommended reading: jquery code to achieve a picture carousel effect (i)

In the previous article to introduce the JavaScript implementation of the image Carousel effect (a) Let the picture beat up, here we realize the image sequence node jump implementation. At the same time, we generally need to know where he jumps, Here's the picture sequence. The nodes need to be displayed with the picture. We'll make an analysis directly.

Before you tell the text before you show the effect of the picture:

In the HTML,CSS code structure we need to add a picture sequence whether the selected style

#slider ol li a.active{
background-color: #ffffff;
Color: #ff0000;
}

JS code in the previous article we need to do some of the JS code to do some changes and additions, here the first thing to change is to jump the code to do a package, encapsulated in a method, and then return the value of setinterval. This is mainly for the sequence node to implement some functions.

Then in the jump code, change the corresponding sequence node style, in order to be able to show the position of the jump.

Picture node
var slider = document.getElementById ("slider");
var Imgul = slider.getelementsbytagname ("ul") [0];
var imglis = imgul.getelementsbytagname ("li");
var len = imglis.length;
Picture sequence node
var numol = slider.getelementsbytagname ("ol") [0];
var numlinks = Numol.getelementsbytagname ("a");
Shared sequence
var index = 0;
The picture jumps, the picture jumps at the same time, changes the sequence node the jump
var jump = function () {return
setinterval (function () {
if (index >= len) { C14/>index = 0;
}
Picture Jump
Imgul.style.left =-(* index) + "px";
Change the sequence node style: First clear all the linked styles, then activate the corresponding sequence node style for
(var i = 0; i < len; i++) {
Numlinks[i].setattribute ("Class", " ");
}
Numlinks[index].setattribute ("Class", "active");
index++;
},2000);
var jumpindex = jump ();

There is also a need to add control to the hover state of the sequence nodes.

Hover after the picture jump should stop, should stay in hover under the picture Show here the number of sequential nodes is relative to the number of pictures, so you can change other states by the location of the current sequence node.

When the mouse leaves the sequence node, you should let the picture continue to automatically jump.

Increase the hover control of the sequence node: 1. Hover to prohibit the jump of the picture, displayed in the current picture, here you need to clear jump 2.hover left, in the current picture to do the jump for the image
(var i = 0; i < len; i++) {
   //hover
numlinks[i].onmouseover = function () {
clearinterval (jumpindex);
for (var i = 0; i < len; i++) {
Numlinks[i].setattribute ("Class", "");
if (numlinks[i] = = this) {
index = i;
}
}
Imgul.style.left =-(* index) + "px";
Numlinks[index].setattribute ("Class", "active");
}
Out
numlinks[i].onmouseout = function () {
Jumpindex = jump ();
}
}

So we're done with the second step. To this article all the narration also gives everybody to introduce finished, hoped for everybody to have the help.