Javascript实现图片轮播效果(二)图片序列节点的控制实现

#slider ol li a.active{

background-color: #ffffff;

color: #ff0000;

}

//图片节点

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

}

}