你的位置:首页 > 网页设计

[网页设计]使用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开始滚动下一张,具体内容请大家参考代码。