<!DOCTYPE html>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
if(timer){
clearInterval(timer);
timer=null;
}
timer=setInterval(autoplay,2000);
// 定义图片切换函数
function autoplay(){
index++;
if(index>=list.length) {
index=0;
}
changeoptions(index);
}
//鼠标移上时,整个容器停止图片自动切换
wrap.onmouseover=function(){
clearInterval(timer);
}
//鼠标离开时,整个容器开始继续图片自动切换
wrap.onmouseout=function(){
timer=setInterval(autoplay,2000);
}
//遍历数字导航,实现划过就切换至相应图片
for (var i=0;i<list.length;i++) {
list[i].id=i;
list[i].onmouseover=function(){
clearInterval(timer);
changeoptions(this.id);
}
}
function changeoptions(curindex){
for(var j=0;j<list.length;j++){
list[j].calssName='';
pic.style.top=0px;
}
list[curindex].calssName='active';
pic.style.top=-curindex*170+'px';
index=curindex;
}
}
</script>