图片无缝轮播

  < script type = "text/javascript" >

  window.onload=function(){

  var wrap=document.getElementById('wrap'),

   pic=document.getElementById('pic').getElementsByTagName("li"),

   list=document.getElementById('list').getElementsByTagName('li'),

   index=0,

   timer=null;

 

   // 定义并调用自动播放函数

  timer = setInterval(autoPlay, 2000);

 

   // 鼠标划过整个容器时停止自动播放

  wrap.onmouseover = function () {

   clearInterval(timer);

  }

 

   // 鼠标离开整个容器时继续播放至下一张

  wrap.onmouseout = function () {

   timer = setInterval(autoPlay, 2000);

  }

   // 遍历所有数字导航实现划过切换至对应的图片

  for (var i = 0; i < list.length ; i++) {

   list[i] .onmouseover = function () {

   clearInterval(timer);

   index = this .innerText - 1;

   changePic(index);

   };

  };

 

  function autoPlay () {

   if (++index >= pic.length) index = 0;

   changePic(index);

  }

 

   // 定义图片切换函数

  function changePic (curIndex) {

   for (var i = 0; i < pic.length ; ++i) {

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

   list[i] .className = "" ;

   }

   pic[curIndex] .style.display = "block" ;

   list[curIndex] .className = "on" ;

  }

 

  };

 

  </script>

</ head >

< body >

  < div class = "wrap" id = 'wrap' >

  < ul id = "pic" >

   < li >< img src = "1.jpg" alt = "" ></ li >

   < li >< img src = "2.jpg" alt = "" ></ li >

   < li >< img src = "3.jpg" alt = "" ></ li >

   < li >< img src = "4.jpg" alt = "" ></ li >

   < li >< img src = "5.jpg" alt = "" ></ li >

  </ ul >

  < ol id = "list" >

   < li class = "on" >1</ li >

   < li >2</ li >

   < li >3</ li >

   < li >4</ li >

   < li >5</ li >

  </ ol >

  </ div >