你的位置:首页 > 软件开发 > Java > js实现标准无缝滚动

js实现标准无缝滚动

发布时间:2016-08-29 20:00:06
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无缝滚动</title> ...
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>无缝滚动</title>  <style>  #warp{    width: 1200px;    height: 300px;    overflow: hidden;    margin:100px auto 0;  }  #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;    width: 200px;    height: 300px;  }  </style></head><body>  <div id="warp">    <div id="con">      <div id="box1">        <img src='/images/loading.gif' data-original="images/meinv1.jpg" >        <img src='/images/loading.gif' data-original="images/meinv2.jpg" >        <img src='/images/loading.gif' data-original="images/meinv3.jpg" >        <img src='/images/loading.gif' data-original="images/meinv4.jpg" >        <img src='/images/loading.gif' data-original="images/meinv5.jpg" >        <img src='/images/loading.gif' data-original="images/meinv6.jpg" >      </div>      <div id="box2"></div>    </div>  </div>  <script>    var warp=document.getElementById('warp');    var con=document.getElementById('con');    var box1=document.getElementById('box1');    var box2=document.getElementById('box2');    // box2.innerHTML=box1.innerHTML;    var timer1=null,x=0;    function scroll(){//滚动函数    box2.innerHTML=box1.innerHTML;    timer1=setInterval(function(){      x++;      if (x>=box1.clientWidth) {        x=0;        warp.scrollLeft=x;      }      warp.scrollLeft=x;    },10)    }    scroll();    warp.onmouseenter=function(){      clearInterval(timer1);    }    warp.onmouseleave=function(){      scroll();    }  </script></body></html>

原标题:js实现标准无缝滚动

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。