无缝滚动

最新推荐文章于 2024-06-14 14:03:09 发布

sjy7329

最新推荐文章于 2024-06-14 14:03:09 发布

阅读量184

点赞数

分类专栏：定时器

本文链接：https://blog.csdn.net/sunjynyue/article/details/78223989

版权

定时器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>