Javascript implements image carousel effect (2) Control implementation of image sequence nodes_javascript skills

Recommended reading: Jquery code to achieve image carousel effect (1)

In the last article, I introduced you to Javascript to implement the image carousel effect (1) to make the image jump . Here we implement the jump implementation of the image sequence node. While the image jumps, we Generally, you need to know which position he jumps to. Here is the picture sequence node that needs to be displayed together with the picture. Let’s analyze it directly below.

Before I get into the main text, let me show you the renderings:

In the HTML and CSS code structure, we need to add a style to determine whether the image sequence is selected

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

In the JS code, we need to make some changes and additions to the JS code in the previous article. The first thing to change here is to encapsulate the jump code into a method, and then return the value of setInterval. This Mainly to implement some functions for sequence nodes.

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

//图片节点
var slider = document.getElementById("slider");
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li");
var len = imglis.length;
//图片序列节点
var numol = slider.getElementsByTagName("ol")[0];
var numlinks = numol.getElementsByTagName("a");
//共享序列
var index = 0;
//图片跳转,图片跳转的同时,改变序列节点的跳转
var jump = function () {
return setInterval(function(){
if(index >= len){
index = 0;
}
//图片跳转
imgul.style.left = - (800 * index) + "px";
//改变序列节点样式:首先要清除所有的链接的样式,然后在激活对应的序列节点样式
for (var i = 0; i < len; i++) {
numlinks[i].setAttribute("class","");
}
numlinks[index].setAttribute("class","active");
index++;
},2000);
};
var jumpindex = jump();

Here we also need to add control in the hover state of the sequence node.

The picture jump should stop after the hover, and the pictures that should stay under the hover are displayed. The number of sequence nodes corresponds to the number of pictures, so other states can be changed through the location of the current sequence node.

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

//增加序列节点的hover控制: 1. hover后要禁止图片的跳转,显示在当前的图片上,这里就需要清除跳转 2.hover离开后,在当前的图片上做图片的跳转
for (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 = - (800 * index) + "px";
numlinks[index].setAttribute("class","active");
}
//out
numlinks[i].onmouseout = function(){
jumpindex = jump();
}
}

In this way, we have completed the effect of the second step. At this point, the entire description of this article has been introduced to you. I hope it will be helpful to everyone.