图片滑过后是空白,然后才是另一张图片??为什么??
<link rel="stylesheet" href="header.css" ></link>
<script>
window.onload = function(){
//获取各个标签
var slide = document.getElementById("slide");
var list = document.getElementById("list");
var buttons = document.getElementById("buttons").getElementsByTagName("span");
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var index = 1;
var animated = false;
//原点按钮样式变换
function showButtons(){
for (var i = 0;i<buttons.length;i++){
if(buttons[i].className =='on'){
buttons[i].className = '';
break;
}
}
buttons[index-1].className = 'on';
}
//点击前进按钮
next.onclick = function(){
if(index==3){
index =1;
}
else{
index +=1;
}
showButtons();
if(animated == false){
Move(-1899);
}//list.style.left只能获取在标签内的style ,放在css中则不能
}
//点击后退按钮
prev.onclick = function(){
if(index==0){
index = 3;
}
else{
index =index-1;
}
showButtons();
if(!animated){
Move(1899);
}
}
//点击原点按钮滑动图片
for(var i = 0;i<buttons.length;i++){
buttons[i].onclick = function(){
if(this.className == 'on'){
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -1899 * (myIndex - index);
index = myIndex;
showButtons();
if(!animated){
Move(offset);
}
}
}
//图片定时滚动
slide.onmouseover = iStop();
slide.onmouseout = play();
play();
}
function Move(offset){
var newLeft = parseInt(list.style.left) + offset;
var time = 300;//位移总时间;
var interval = 1;//位移间隔时间
var speed = offset/(time/interval);//每次位移量
function go(){
if((speed < 0 && parseInt(list.style.left)>newLeft) || (speed>0 && parseInt(list.style.left)<newLeft)){
list.style.left = parseInt(list.style.left)+speed +'px';
setTimeout(go,interval);
}
else{
animated = false;
list.style.left = newLeft + 'px';
list.style.left = newLeft + 'px';
if(newLeft < -7596){
list.style.left = 0+ 'px';
}
if(newLeft> 0){
list.style.left = -7596 + 'px';
}
}
}
go();
}
function play(){
var timer = null;
timer = setInterval(function(){
next.onclick();
},3000);
}
function iStop(){
clearInterval(timer);
}
</script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="head">
<!--滑动的图片 -->
<div id="slide">
<div id="list" style="left:0px;">
<img src="images/60M58PICWFD_1024.jpg" width="1899" height="625" />
<img src="images/8952533_120845629000_2.jpg" width="1899" height="625" />
<img src="images/full_562_11922.jpg" width="1899" height="625" />
<img src="images/60M58PICWFD_1024.jpg" width="1899" height="625" />
<img src="images/8952533_120845629000_2.jpg" width="1899" height="625" />
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"> < </a>
<a href="javascript:;" class="arrow" id="next"> > </a>
<!-- more equipment adapter -->
</div><!--slide -->
</div><!-- head -->
ps:我把图片换成全屏滚动了
求大神帮忙