js实现按钮控制带有停顿效果的图片滚动

2019-11-20 09:07:45

字体：大中小

来源：转载

供稿：网友

本文实例使用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制作网站首页图片轮播特效代码