window.onload=function(){
var wrap=document.getElementById('wrap'),
pic=document.getElementById('pic').getElementsByTagName('li'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;
// 定义并调用自动播放函数
function autoPlay(){
index++;
if(index >= pic.length){
index = 0;
}
changePic(index);
}
timer = setInterval(autoPlay,2000);
// 定义图片切换函数
function changPic(thisIndex){
for(var j = 0; j < pic.length; j++){
pic[j].style.display = 'none';
list[j].className = '';
}
pic[thisIndex].style.display = 'block';
//pic.style.top = "-" + thisIndex*170 +"px";
list[thisIndex].className = 'on';
}
// 鼠标划过整个容器时停止自动播放
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);
changPic(this.id);
}
}
}
MarlboroKay
stone310
相关分类