JS小练习之实现无缝滚动

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>定时器</title>
    <style>
    /* #div1{
      width: 200px;height: 200px;background: red;position:absolute;
      left:200px;top:150px;margin: 50px;
    } */

    * {
      margin: 0;
      padding: 0;
    }
    #wrapper{
      width:712px;
      height:108px;
      margin: 100px auto;
      /* position: relative ：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，
      因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置*/
      position: relative;
      background: red;
      /* overflow 属性规定当内容溢出元素框时发生的事情 ,
      visible属性，默认值，内容不会被修剪，会呈现在元素框之外；
      hidden属性，内容会被修剪，并且其余内容是不可见的；
      scroll属性，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容*/
      overflow:hidden;
    }
    #wrapper ul li {
      float:left;
      width: 178px;
      height: 108px;
      list-style: none;
    }
    #wrapper ul{
      /* position: absolute;绝对定位，位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。
      此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定
      */
      position: absolute;
      left:0;
      top: 0;
    }
    .button{
      width: 100px;
      height:50px;
      margin: 100px auto;
    }
    </style>
    <script type="text/javascript">
    //实现让一个物体滚动起来
    // setInterval(function () {
    //   var oDiv=document.getElementById('div1');
    //   oDiv.style.left=oDiv.offsetLeft+10+'px';
    // },30);
    window.onload=function(){
      var oDiv=document.getElementById('wrapper');
      var oUl=oDiv.getElementsByTagName('ul')[0];
      var aLi=oUl.getElementsByTagName('li');
      var oA=document.getElementsByTagName('a');
      var speed=2;

      oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
      oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

      function move(){
        // 向左滚动
        // if(oUl.offsetLeft<-oUl.offsetWidth/2){  //offsetLeft当前元素的左外边框到包含该元素的左内边框之间的距离
        //   oUl.style.left='0';
        // };
        //向右滚动
        if(oUl.offsetLeft>0){
          oUl.style.left=-oUl.offsetWidth/2+'px';
        }
        oUl.style.left=oUl.offsetLeft+speed+'px';
        // oUl.style.left=oUl.offsetLeft-2+'px';
      }

      var timer=setInterval(move,30);

      oDiv.onmouseover=function(){
        clearInterval(timer);
      };    //当鼠标移入，滚动停止

      oDiv.onmouseout=function(){
        timer=setInterval(move,30);
      }
      oA[0].onclick=function(){   //点击按钮向左走
        speed=-2;
      };
      oA[1].onclick=function(){   //点击按钮向右走
        speed=2;
      };

    }
    </script>
  </head>
  <body>
    <!-- <div id='div1' onclick="alert(this.offsetLeft);"></div> -->
    <!-- 返回250，offsetLeft会返回所有左边的距离，也就是综合之后的，包括left:200px;margin: 50px; -->
    <div id="wrapper">
      <ul>
        <li><img src="image/1.jpg" alt=""></li>
        <li><img src="image/2.jpg" alt=""></li>
        <li><img src="image/3.jpg" alt=""></li>
        <li><img src="image/4.jpg" alt=""></li>
      </ul>
    </div>
    <div class='button'>
      <a href="javascript:;">向左</a>
      <a href="javascript:;">向右</a>
    </div>
  </body>

</html>
JS小练习之实现无缝滚动

猜你喜欢
