慕码人2735493
2017-05-11 16:22
function change(curIndex){
pic.style.marginTop=-170*curIndex+'px';
for(var n=0;n<list.length;n++){
list[n].className='';
}
list[curIndex].className='on';
index=curIndex;
}
wrap.onmouseover=function(){
clearInterval(timer);
}
wrap.onmouseout=auto;
for(var i=0;i<list.length;i++){
list[i].id=i;
list[i].onmouseover=function(){
change(this.id);
}
}
wrap.onmouseout=auto; 这里是当鼠标移出容器时恢复自动播放,
wrap.onmouseout=function() {timer=setInterval(autoPlay,1000);}这是我的写法,至于这里为什么用auto就不清楚了
function change(curIndex){ //这是切换位置的函数
pic.style.marginTop=-170*curIndex+'px'; //这里的pic是整个图片列表的ul,通过改变上边距来让不
//同位置的图片显示在窗口中,从而达到切换图片的效果
for(var n=0;n<list.length;n++){ //这里是把所有数字导航样式去掉
list[n].className='';
}
list[curIndex].className='on'; //是当前的数字导航高亮
index=curIndex; //更新索引
}
wrap.onmouseover=function(){ //鼠标滑过容器的时候去除自动播放
clearInterval(timer);
}
wrap.onmouseout=auto; //这里就不清楚了,你的代码没复制全,从这些代码中
//只能分析出这些作用
for(var i=0;i<list.length;i++){ //这里是鼠标滑过数字导航时移动到对应图片上
list[i].id=i;
list[i].onmouseover=function(){
change(this.id);
}
}
Tab选项卡切换效果
65469 学习 · 533 问题
相似问题