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

2019-11-20 09:51:57

字体：大中小

来源：转载

供稿：网友

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

效果图：

实现代码：

<!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="img/pic4.jpg"/></li>        <li><img src="img/pic3.jpg"/></li>        <li><img src="img/pic2.jpg"/></li>        <li><img src="img/pic1.jpg"/></li>      </ul>    </div>    <input type="button" name="" id="btn1" value="向左" />    <input type="button" id="btn2" value="向右"/>  </body></html>

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

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

以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。

上一篇：js剪切板应用clipboardData实例解析

下一篇：原生JavaScript编写canvas版的连连看游戏