php滚动显示停顿,使用js实现带有停顿效果的图片滚动(按钮控制)

>

右滚>>button>

div>

varwarp=document.getElementById('warp');varcon=document.getElementById('con');varbox1=document.getElementById('box1');varbox2=document.getElementById('box2');varimg=box1.getElementsByTagName('img')[0];varscrollL=document.getElementById('scrollL');varscrollR=document.getElementById('scrollR');vartimer1=null,timer2=null,flage=1;

box2.innerHTML=box1.innerHTML;

max=box1.clientWidth;

imgmax=img.clientWidth+10;functionscrollLeft(){

flage=1;

clearInterval(timer1);

timer1=setInterval(function(){

warp.scrollLeft++;if(warp.scrollLeft>=max) {

warp.scrollLeft=0;

}if(warp.scrollLeft%imgmax==0){

clearInterval(timer1);

clearTimeout(timer2);

timer2=setTimeout(function(){

timer1=setInterval(scrollLeft,5)

},2000)

}

},5)

}functionscrollRight(){

flage=0;

clearInterval(timer1);

timer1=setInterval(function(){

warp.scrollLeft--;if(warp.scrollLeft<=0) {

warp.scrollLeft=max;

}if(warp.scrollLeft%imgmax==0){

clearInterval(timer1);

clearTimeout(timer2);

timer2=setTimeout(function(){

timer1=setInterval(scrollRight,5)

},2000)

}

},5)

}

scrollLeft();

scrollL.οnclick=function(){//clearInterval(timer1);

//clearTimeout(timer2);

scrollLeft();

}

scrollR.οnclick=function(){//clearInterval(timer1);

//clearTimeout(timer2);

scrollRight();

}

warp.οnmοuseenter=function(){

clearInterval(timer1);

clearTimeout(timer2);

}

warp.οnmοuseleave=function(){

clearInterval(timer1);

clearTimeout(timer2);

console.log(flage);if(flage) {scrollLeft();}else{scrollRight();}

}script>

body>

html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值