Javascript实现图片轮播:(二)图片序列节点的控制实现!
紧接着上一篇文章,这里我们实现图片序列节点的跳转实现.在图片跳转的同时,我们一般需要知道他跳转的是哪个位置,这里就是图片序列节点需要跟图片一同显示.下面我们就直接作分析.
在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式
#slider ol li a.active{
background-color: #ffffff;
color: #ff0000;
}JS代码中我们需要对上一篇文章的JS代码做一些改变和增加,这里首先要改变的是将跳转的代码做一次封装,封装到一个方法中,然后返回setInterval的值.这个主要是为序列节点实现一些功能.
然后在跳转代码中,改变相应的序列节点的样式,为了能够展示跳转的位置.
//图片节点
var slider = document.getElementById("slider", 0, 0);
var imgul = slider.getElementsByTagName("ul")[0];
var imglis = imgul.getElementsByTagName("li", 0, 0);
var len = imglis.length;
//图片序列节点
var numol = slider.getElementsByTagName("ol")[0];
var numlinks = numol.getElementsByTagName("a", 0, 0);
//共享序列
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","", 0, 0);
}
numlinks[index].setAttribute("class","active", 0, 0);
index++;
},2000, 0, 0);
};
var jumpindex = jump();
这里还需要加入序列节点的hover状态下的控制.
hover后图片跳转应该停止,应停留在hover下的图片展示这里序列节点的数目与图片的数目是相对应的,因此可以通过当前序列节点所在的位置来改变其他的状态.
当鼠标离开序列节点后,应当让图片继续自动跳转.
//增加序列节点的hover控制: 1. hover后要禁止图片的跳转,显示在当前的图片上,这里就需要清除跳转 2.hover离开后,在当前的图片上做图片的跳转
for (var i = 0; i < len; i++){
//hover
numlinks[i].onmouseover = function () {
clearInterval(jumpindex, 0, 0);
for (var i = 0; i < len; i++) {
numlinks[i].setAttribute("class","", 0, 0);
if (numlinks[i] === this){
index = i;
}
}
imgul.style.left = - (800 * index) + "px";
numlinks[index].setAttribute("class","active", 0, 0);
}
//out
numlinks[i].onmouseout = function(){
jumpindex = jump(, 0, 0);
}
}这样我们就完成了第二步的效果.
