程序有问题,多循环一次。
其余功能已经实现。现在滑到第五张图片时,再往后会显示一段空白,再回到第一张图。请问如何修改?
<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(start,2000);
function start(){
index++;
if(index > list.length){
index = 0;
}
change(index);
}
// 定义图片切换函数
function change(curIndex){
for(var i=0 ; i<list.length ; i++){
pic[i].style.display = 'none';
list[i].className = '';
}
pic[curIndex].style.display = 'block';
list[curIndex].className = 'on';
index = curIndex;
}
// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function(){
clearInterval(timer);
}
// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function(){
timer = setInterval(start,2000);
}
// 遍历所有数字导航实现划过切换至对应的图片
for(var j = 0;j<list.length;j++){
list[j].id = j;
list[j].onmouseover = function(){
change(this.id);
}
}
}
</script>