JS---案例：无缝的轮播图

案例：无缝的轮播图

w

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;

    }

    img {
      vertical-align: top;
    }

    /*取消图片底部3像素距离*/
    .box {
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
    }

    .box ul li {
      float: left;
    }

    .box ul {
      width: 1500px;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <div class="box" id="screen">
    <ul>
      <li><img src="imagess/01.jpg" alt="" /></li>
      <li><img src="imagess/02.jpg" alt="" /></li>
      <li><img src="imagess/03.jpg" alt="" /></li>
      <li><img src="imagess/04.jpg" alt="" /></li>
      <li><img src="imagess/01.jpg" alt="" /></li>
    </ul>
  </div>
  <script src="common.js"></script>
  <script>

    var current = 0;//只声明了一次
    function f1() {
      //获取ul里面的子元素
      var ulObj = my$("screen").children[0];
      //从当前位置每一次向左移动10px
      current -= 10;
      //判断当前位置超过-1200,就回到0的位置
      if (current < -1200) {
        ulObj.style.left = 0 + "px";
      } else {
        ulObj.style.left = current + "px";
      }
    }
    var timeId = setInterval(f1, 30)
    my$("screen").onmouseover = function () {
      clearInterval(timeId);
    };
    my$("screen").onmouseout = function () {
      timeId = setInterval(f1, 30)
    };

  </script>

</body>

</html>

 

posted @ 2019-12-12 21:52  jane_panyiyun  阅读(374)  评论(0)  编辑  收藏  举报