js实现按钮控制带有停顿效果的图片滚动
本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>无缝滚动2</title> <style> #warp{ width:1250px; height:300px; overflow:hidden; margin:100pxauto0; overflow-x:auto; } #warp#con{ width:4000px; height:300px; overflow:hidden; } #warp#con#box1{ float:left; overflow:hidden; } #warp#con#box2{ float:left; overflow:hidden; } #warpimg{ float:left; margin-right:10px; width:200px; height:300px; } .btn{ text-align:center; margin-top:10px; } .btnbutton{ font-size:16px; } </style> </head> <body> <divid="warp"> <divid="con"> <divid="box1"> <imgsrc="images/meinv1.jpg"alt=""> <imgsrc="images/meinv2.jpg"alt=""> <imgsrc="images/meinv3.jpg"alt=""> <imgsrc="images/meinv4.jpg"alt=""> <imgsrc="images/meinv5.jpg"alt=""> <imgsrc="images/meinv6.jpg"alt=""> </div> <divid="box2"></div> </div> </div> <divclass="btn"> <buttonid="scrollL"><<左滚</button> <buttonid="scrollR">右滚>></button> </div> <script> 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.onclick=function(){ //clearInterval(timer1); //clearTimeout(timer2); scrollLeft(); } scrollR.onclick=function(){ //clearInterval(timer1); //clearTimeout(timer2); scrollRight(); } warp.onmouseenter=function(){ clearInterval(timer1); clearTimeout(timer2); } warp.onmouseleave=function(){ clearInterval(timer1); clearTimeout(timer2); console.log(flage); if(flage){scrollLeft();} else{scrollRight();} } </script> </body> </html>
这种效果的具体效果是鼠标移上去滚动停止,移出滚动,滚动时是一张一张图片的滚动,即滚动一张之后停2s开始滚动下一张,具体内容请大家参考代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。