当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS---案例：无缝的轮播图

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

2019年12月13日  | 移动技术网IT编程  | 我要评论

案例：无缝的轮播图

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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网