画像カルーセル効果をJavaScriptで実装(2)画像シーケンスの制御実装 ノード_JavaScriptスキル

推奨読書: 画像カルーセル効果を実現するための JQuery コード (1)

前回の記事では、画像をジャンプさせるための画像カルーセルエフェクトを実装するJavaScriptを紹介しました ここでは、画像がジャンプする際の画像シーケンスノードのジャンプ実装を実装します。一般に、彼がどの位置にジャンプするかを知る必要があります。これは、画像と一緒に表示する必要がある画像シーケンス ノードです。
を見てみましょう。

本文に入る前に、レンダリングをお見せしましょう:

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

このようにして、第 2 段階の効果が完成しました。この記事の説明がすべて皆さんに役立つことを願っています。