使用原生的javascript来实现轮播图

varoPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;

window.onload =function(){

  oPic = document.getElementsByClassName("pic")[0];

  oLi = oPic.getElementsByTagName("li");

  anniu = document.getElementsByClassName("anniu")[0];

  aLi = anniu.getElementsByTagName("li");

  aLength = aLi.length;

  num = 0;

  oG = document.getElementsByClassName("g")[0];

  oSpan = oG.getElementsByTagName("span");

  oLeft = oSpan[0];

  oRight = oSpan[1];

  start();

  oG.onmouseover = end;

  oG.onmouseout = start;

  for(varj=0; j

    aLi[j].index = j;

    aLi[j].onmouseover = change;

  }

  oRight.onclick = time;

  oLeft.onclick = times;

}

//自动轮播开始或结束

functionstart(){

    timer = setInterval(time,2000);

    hide();

}

functionend(){

  clearInterval(timer);

  show();

}

//图片切换++

functiontime(){

  for(vari=0; i

    oLi[i].style.display ="none";

    aLi[i].className ="";

  }

  num++;

  num = num % 4;

  oLi[num].style.display ="block";

  aLi[num].className ="on";

}

//图片切换--

functiontimes(){

  for(vari=0; i

    oLi[i].style.display ="none";

    aLi[i].className ="";

  }

  num--;

  num = (num+4)%4;

  oLi[num].style.display ="block";

  aLi[num].className ="on";

}

//鼠标滑过按钮，图片轮播

functionchange(){

  _index =this.index;

  for(vark=0; k

    aLi[k].className ="";

    oLi[k].style.display ="none";

  }

  aLi[_index].className ="on";

  oLi[_index].style.display ="block";

}

//左右按钮显示或隐藏

functionshow(){

  oSpan[0].style.display ="block";

  oSpan[1].style.display ="block";

}

functionhide(){

  oSpan[0].style.display ="none";

  oSpan[1].style.display ="none";

}