按照阿安老师的《焦点图轮播特效》这部教程,5-1课。一步一步做的。检查了好几遍都没有错呀?为什么就是不执行呢?别的都好了,就是点击小圆点切换到相应的图片不行,代码见69-76行,哪里错了呢?
74行中的animate(offset);是起到什么作用的?html>
焦点轮播图
*{margin:0;padding:0;text-decoration:none;}
body{padding:20px;}
#container{width:600px;height:400px;border:3pxsolid#333;overflow:hidden;position:relative;}
#list{width:4200px;height:400px;position:absolute;z-index:1;}
#listimg{float:left;}
#buttons{position:absolute;height:10px;width:100px;z-index:2;bottom:20px;left:250px;}
#buttonsspan{cursor:pointer;float:left;border:1pxsolid#fff;width:10px;height:10px;border-radius:50%;background:#333;margin-right:5px;}
#buttons.on{background:orangered;}
.arrow{cursor:pointer;display:none;line-height:39px;text-align:center;font-size:36px;font-weight:bold;width:40px;height:40px;position:absolute;z-index:2;top:180px;background-color:RGBA(0,0,0,.3);color:#fff;}
.arrow:hover{background-color:RGBA(0,0,0,.7);}
#container:hover.arrow{display:block;}
#prev{left:20px;}
#next{right:20px;}
window.οnlοad=function(){
varcontainer=document.getElementById('container');//获取容器
varlist=document.getElementById('list');//获取图片列表的div
varbuttons=document.getElementById('buttons').getElementsByTagName('span');//获取5个小按钮
varprev=document.getElementById('prev');//获取左箭头
varnext=document.getElementById('next');//获取右箭头
varindex=1;//用以确认亮起第几个小圆点或第几张图片
next.οnclick=function(){//鼠标点击右箭头,执行函数
list.style.left=list.offsetLeft-600+'px';//left值等于当前left值减600
if(list.offsetLeft
if(index==5){index=1}//如果随着点击,index值变为5,则回到1,也就是当图片到最后一个时,继续点击则回到第一个小圆点亮起
else{index=index+1;}//index值每次增加1
showbutton();//小圆点亮起函数,详见43行
}
prev.οnclick=function(){//鼠标点击左箭头,执行函数
list.style.left=list.offsetLeft+600+'px';//left值等于当前left值加600
if(list.offsetLeft>-600){list.style.left=-3000+'px'}//如果当前高度大于-600,left值变为-3000,这样实现无尽滚动
if(index==1){index=5}//如果随着点击,index值变为了1,则回到5,也就是当图片到第一个时,继续点击左按钮则回到最后一个小圆点亮起
else{index=index-1;}//index值每次增加1
showbutton();//小圆点亮起函数,详见43行
}
functionshowbutton(){//该函数为实现下方小圆点功能所立,用于34行
for(vari=0;i
if(buttons[i].className=='on'){//如果有小圆点css为on,则其他小圆点都为空
buttons[i].className='';
break;//退出(貌似没意义?)
}
}
buttons[index-1].className='on';//随着每次点击,小圆点亮起
}
for(vari=0;i
buttons[i].οnclick=function(){
varmyindex=parseInt(this.getAttribute('index'));//获取中的index属性,并转换为纯数字,这里不能用this.index,因为index是自定义属性。而getAttribute()即可以获取自带属性和自定义属性
varoffset=-600*(myindex-index);//算出每次点击小圆点的偏移量,(目标值-原始值)*-600
animate(offset);
index=myindex;//切换完了更新当前index值
}
}
}
<
>