w3j
2015-09-29 19:07
我写的代码没用箭头控制和焦点控制。直接自动播放的。可是为什么过一会儿播放速度就会很快呢????
代码如下:
window.onload=function(){
var img=document.getElementById("img");
var list=document.getElementById("list");
/*var prev=document.getElementById("prev");
var next=document.getElementById("next");*/
var timer;
var animated=false;
function animate(offset){
animated=true;
var newLeft = parseInt(list.style.left) + offset ;
var time=300;
var interval=10;
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';
if( newLeft >-1366){
list.style.left = -5464 + 'px';}
if( newLeft < -5464){
list.style.left = -1366 + 'px';
}
}
}
go();
} //无限滚动
function play(){
timer=setInterval(function(){
animate(-1366);
},2000);
}//自动播放
function stop(){
clearInterval(timer);
}
/*next.onclick=function(){
animate(-1366);
}
prev.onclick=function(){
animate(1366);
}//箭头控制*/
list.onmouseover=stop;
list.onmouseout=play;
play();
}
你无限滚动的时候没有清除时钟。
焦点图轮播特效
65279 学习 · 611 问题
相似问题