Implementation of Javascript-based image carousel effect (2) control of Image Sequence nodes _ javascript tips-js tutorial

This article mainly introduces the Javascript Implementation of image carousel effect (2) related information on the control of Image Sequence nodes. If you need it, please refer to the following: jquery code for image carousel (1)

In the previous article, we introduced how Javascript achieves image carousel (I) to beat the image. Here we implement the jump of the Image Sequence node. while redirecting an image, we generally need to know where it is redirected. Here, the image sequence node needs to be displayed along with the image. next we will analyze it directly.

We will show you the following information before you talk about the text:

In the HTML and CSS code structures, we need to add an image sequence to determine whether the selected style is used.

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

In JS code, we need to make some changes and additions to the JS Code in the previous article. The first thing we need to change here is to encapsulate the code to be redirected and encapsulate it into a method, then return the value of setInterval. this mainly implements some functions for the sequence node.

Then, in the jump code, change the corresponding sequence node style to display the jump position.

// Image node var slider = document. getElementById ("slider"); var imgul = slider. getElementsByTagName ("ul") [0]; var imglis = imgul. getElementsByTagName ("li"); var len = imglis. length; // Image Sequence node var numol = slider. getElementsByTagName ("ol") [0]; var numlinks = numol. getElementsByTagName ("a"); // shared sequence var index = 0; // image jump. When the image jumps, you can change the jump of the sequence node to var jump = function () {return setInterval (function () {if (index> = len) {index = 0 ;}// the image jumps to imgul. style. left =-(800 * index) + "px"; // change the sequence node style: first, clear the style of all links, then, the corresponding sequence node style for (var I = 0; I <len; I ++) {numlinks [I] is activated. setAttribute ("class", "");} numlinks [index]. setAttribute ("class", "active"); index ++;}, 2000) ;}; var jumpindex = jump ();

You also need to add the hover State control of the sequence node.

After the hover, the image jump should be stopped. The images that should stay under the hover should be displayed. The number of sequence nodes corresponds to the number of images, therefore, you can change other States by the position of the current sequence node.

When the mouse leaves the sequence node, the image should be automatically redirected.

// Add hover Control for sequence nodes: 1. after hover, you must disable the image jump and display it on the current image. here you need to clear the jump 2. after hover leaves, jump to the current image for (var I = 0; I <len; I ++) {// hovernumlinks [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 =-(800 * index) + "px"; numlinks [index]. setAttribute ("class", "active");} // outnumlinks [I]. onmouseout = function () {jumpindex = jump ();}}

In this way, we have completed the effect of step 2. All the descriptions in this article have been completed and hope to help you.