无缝滚动

来源：互联网发布：和日本聊天软件编辑：程序博客网时间：2024/04/28 08:28
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      margin:0;      padding:0;    }    .btn{      margin:20px auto 0;      text-align:center;    }    .btn a{      color:#333;      text-decoration:none;    }    #div1{      width:1116px;      height:181px;      margin:100px auto;      position:relative;      background:#f00;      overflow: hidden;    }    #div1 ul{      position:absolute;      top:0;      left:0;    }    div ul li{      float:left;      width:279px;      height:181px;      list-style: none;    }  </style></head><script>  window.onload=function(){    var oDiv=document.getElementById('div1');    var oUl=oDiv.getElementsByTagName('ul')[0];    var oLi=oUl.getElementsByTagName('li');    var speed=-2;    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';    function move(){      if( oUl.offsetLeft<-oUl.offsetWidth/2){        oUl.style.left='0';      }      if(oUl.offsetLeft>0){        oUl.style.left=-oUl.offsetWidth/2+'px'      }      oUl.style.left=oUl.offsetLeft+speed+'px';    }    timer=setInterval(move,30);    oDiv.onmouseover=function(){      clearInterval(timer);    };    oDiv.onmouseout=function(){      timer=setInterval(move,30);    };    document.getElementsByTagName('a')[0].onclick=function(){      speed=-2;    };    document.getElementsByTagName('a')[1].onclick=function(){      speed=2;    }  }</script><body><div class="btn">  <button><a href="javascript:;">向左走</a></button>  <button><a href="javascript:;">向右走</a></button></div><div id="div1">  <ul>    <li><img src="images/pic.jpeg"></li>    <li><img src="images/pic.jpeg"></li>    <li><img src="images/pic.jpeg"></li>    <li><img src="images/pic.jpeg"></li>  </ul></div></body></html>
阅读全文
0 0