자바스크립트로 이미지 캐러셀 효과 구현 (2) 이미지 시퀀스 node_javascript 기술 구현 제어

추천 자료: 이미지 캐러셀 효과를 얻기 위한 Jquery 코드(1)

지난 기사에서 이미지 점프를 만들기 위한 이미지 캐러셀 효과(1) 구현 을 소개했습니다. 여기서는 이미지가 점프하는 동안 이미지 시퀀스 노드의 점프 구현을 구현합니다. , 우리는 일반적으로 그가 어떤 위치로 점프하는지 알아야 합니다. 다음은 그림과 함께 표시되어야 하는 그림 시퀀스 노드입니다.

본문에 들어가기 전에 렌더링을 보여드리겠습니다.

HTML 및 CSS 코드 구조에서 이미지 시퀀스가 ​​선택되었는지 여부를 결정하는 스타일을 추가해야 합니다

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

JS 코드에서는 이전 글의 JS 코드를 일부 변경하고 추가해야 합니다. 여기서 가장 먼저 변경해야 할 것은 점프 코드를 메소드로 캡슐화한 다음 setInterval 값을 반환하는 것입니다. 주로 시퀀스 노드에 대한 일부 기능을 구현합니다.

그런 다음 점프 코드에서 해당 시퀀스 노드의 스타일을 변경하여 점프 위치를 표시합니다.

//图片节点
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();

여기서 시퀀스 노드의 호버 상태에 대한 제어도 추가해야 합니다.

호버 이후에는 사진 점프가 중지되어야 하며, 호버 아래에 있어야 하는 사진이 표시되므로 시퀀스 노드의 수는 사진의 수에 해당하므로 현재 시퀀스 노드의 위치를 ​​통해 다른 상태를 변경할 수 있습니다. .

마우스가 시퀀스 노드를 벗어나면 그림이 자동으로 계속 점프해야 합니다.

//增加序列节点的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();
}
}

이렇게 하여 두 번째 단계의 효과가 완성되었습니다. 이 시점에서 이 글의 전체 설명이 여러분에게 도움이 되기를 바랍니다.