DDR爱好者之家

js实现可控制左右方向的无缝滚动效果
站长资源 2024/11/29 佚名
48 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了无缝滚动效果JavaScript代码实现，供大家参考，具体内容如下】

效果图：

js实现可控制左右方向的无缝滚动效果

实现代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="gb2312" />
    <title>zzzz</title>
    <style>
      *{
        margin: 0;
        padding:0;
      }
      body{
        width: 1000px;
        margin: 100px auto;
        background-color: #fff;
      }
      #wrapper{
        overflow: hidden;
        width: 600px;
        height: 100px;
        position: relative;
         
      }
      #wrapper ul {
        position: absolute;
        left: 0;
        top: 0;
      }
      #wrapper li{
        float: left;
        list-style: none;
      }
      #wrapper li img{
        width: 150px;
        height: 100px;
        border-radius: 9px;
      }
      input[type=button]{
        margin-top: 20px;
        width: 35px; 
        height: 25px;
        line-height: 25px;
      }
    </style>
    <script type="text/javascript">
      window.onload=function(){
        var timer=null;
        var speed=4;
        var od=document.getElementById("wrapper");
        var au=od.getElementsByTagName('ul')[0];
        var ali=au.getElementsByTagName('li');
        au.innerHTML=au.innerHTML+au.innerHTML;
        au.style.width=ali[0].offsetWidth*ali.length+'px';
        timer=setInterval(move,30)
        function move(){
          if(au.offsetLeft<-au.offsetWidth/2){
            au.style.left='0';
          }
          if(au.offsetLeft>0){
            au.style.left=-au.offsetWidth/2+'px';
          }
          au.style.left=au.offsetLeft+speed+'px';
        }
        od.onmouseover=function(){
          clearInterval(timer);
        }
        od.onmouseout=function(){
          timer=setInterval(move,30)
        }
        document.getElementById("btn1").onclick=function(){
          speed=-4;
        }
        document.getElementById("btn2").onclick=function(){
          speed=4;
        }
      }
    </script>
  </head>
  <body>
    <div id="wrapper">
      <ul>
        <li><img src="/UploadFiles/2021-04-02/pic4.jpg">


大家可以参考以下专题进行学习：


《JavaScript滚动效果汇总》《jQuery滚动效果汇总》 《JavaScript图片轮播效果汇总》


以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米