一、思路
将图片拍好层次(z-index)顺序;
用计时器控制图片按照相同时间间隔通过层级的变化来显现;
二、代码
function timeall(now){
for(var k=0;k<now;k++){
for(var i=0;i< a.children.length;i++){//图片滚动一次
var res=a.children[i].style.zIndex;
res++;
if(res== 8){
res=0;
a.children[i].className="imgop";
dian.children[i].className="";
}
if(res== 7){
a.children[i].className="imgopshow";
dian.children[i].className="dbg";
dian1=dian.children[i];//接受变为红色点的索引,让第一个默认值清空
}
a.children[i].style.zIndex=res;
}
}
}
//鼠标进入图片则停止轮播,离开继续轮播
b.onmouseenter=function(){
clearInterval(time);
};
b.onmouseleave=function(){
timeplay();
};
for(var j=0;j<dian.children.length;j++){
dian.children[j].index=j;//取别的函数里面的索引,固定写法
dian.children[j].onmouseenter=function(){
dian1.className="";
this.className="dbg";
var now=0;//图片轮播函数里的参数
if(this.index-dian1.index>0){//当前点击的圆点与上一个原点的索引的差值
now=this.index-dian1.index;
}
else{
now=dian.children.length-Math.abs(this.index-dian1.index);
//当前点击的圆点在之前点的前面;
}
dian1=this;//将变红的点赋给dian1,清空
timeall(now);//调用这个函数来控制图片轮播几次
}
}
right.onclick=function(){
timeall(1);
};
left.onclick=function(){
timeall(7);//相当于图片顺着走了过了七张,所以这个参数为7;
}