js实现按钮控制带有停顿效果的图片滚动
2016-08-30 08:49
1061 查看
本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动2</title> <style> #warp{ width: 1250px; height: 300px; overflow: hidden; margin:100px auto 0; 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; } #warp img{ float: left; margin-right: 10px; width: 200px; height: 300px; } .btn{ text-align: center; margin-top: 10px; } .btn button{ font-size: 16px; } </style> </head> <body> <div id="warp"> <div id="con"> <div id="box1"> <img src="images/meinv1.jpg" alt=""> <img src="images/meinv2.jpg" alt=""> <img src="images/meinv3.jpg" alt=""> <img src="images/meinv4.jpg" alt=""> <img src="images/meinv5.jpg" alt=""> <img src="images/meinv6.jpg" alt=""> </div> <div id="box2"></div> </div> </div> <div class="btn"> <button id="scrollL"><<左滚</button> <button id="scrollR">右滚>></button> </div> <script> var warp=document.getElementById('warp'); var con=document.getElementById('con'); var box1=document.getElementById('box1'); var box2=document.getElementById('box2'); var img=box1.getElementsByTagName('img')[0]; var scrollL=document.getElementById('scrollL'); var scrollR=document.getElementById('scrollR'); var timer1=null,timer2=null,flage=1; box2.innerHTML=box1.innerHTML; max=box1.clientWidth; imgmax=img.clientWidth+10; function scrollLeft(){ 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) } function scrollRight(){ 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开始滚动下一张,具体内容请大家参考代码。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用js实现带有停顿效果的图片滚动(按钮控制)
- 使用js实现带有停顿效果的图片滚动(按钮控制)
- js 图片预览效果,左右滚动,有两个按钮控制
- JS控制点击按钮图片向左或向右循环移动滚动效果
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- 用js实现控制内容的向上向下滚动效果
- 常见JS效果实现实现之图片减速度滚动
- js控制图片滚动效果
- JS控制图片滚动的效果
- [转]JS控制-图片滚动切换效果(实用)
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- JS控制图片滚动的效果
- jquery 实现滚动向上滚动图片上一张停顿一下在上一张效果
- 可控制的用FLASH控件实现的图片渐显JS效果
- JS实现图片滚动(无缝、平滑、上下左右滚动)效果
- 常见JS效果之图片减速度滚动实现代码
- 用js实现控制内容的向上向下滚动效果
- 新浪招聘的图片滚动控制JS效果
- js实现的图片滚动兼展示效果的特效
- 意外发现--玩“JS实现的页面滚动图片加载”效果