原生js模仿京东轮播图效果(简易效果)

最新推荐文章于 2023-03-25 15:38:25 发布

ou~吼

最新推荐文章于 2023-03-25 15:38:25 发布

阅读量287

点赞数 1

文章标签： css css3 html5 html javascript

本文链接：https://blog.csdn.net/ttl1076005106/article/details/103886468

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .bigBox{
      width: 800px;
      height: 200px;
      border: 1px solid red;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    .navOne{
      width: 2200px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .navOne > li {
      width: 200px;
      height: 200px;
      float: left;
    }
  </style>
</head>
<body>
<div class="bigBox">
    <ul class="navOne">
      <li style="background: red">red</li>
      <li style="background: orange">orange</li>
      <li style="background: yellow">yellow</li>
      <li style="background: green">green</li>
      <li style="background: cyan">cyan</li>
      <li style="background: blue">blue</li>
      <li style="background: purple">purple</li>
      <li style="background: red">red</li>
      <li style="background: orange">orange</li>
      <li style="background: yellow">yellow</li>
      <li style="background: green">green</li>
    </ul>
</div>
<script type="text/javascript" src="./js/commom.js"></script><!--/*封装了一个获取节点函数*/-->
<script type="text/javascript">
  var navOne = myqs('.navOne');/*相当于document.querySelector('.navOne');*/
  var bigBox = myqs('.bigBox');
  var timer = setInterval(pM , 20);

  function pM() {
    /*到第8张red的时瞬间还原到第一张red从而达到无缝的效果*/
    if (bigBox.scrollLeft >= navOne.offsetWidth * (7 / 11)) {
      bigBox.scrollLeft = 0;
    }
    /*逐渐香左移动*/
    bigBox.scrollLeft++;
  }
  /*放上暂停轮播*/
  bigBox.onmouseover = function () {
    clearInterval(timer);
  };
  /*移开暂停轮播*/
  bigBox.onmouseout = function () {
    timer = setInterval(pM , 20);
  };
</script>
</body>
</html>

ou~吼

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js模仿京东轮播图效果(简易效果)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding: 0; ...
复制链接

扫一扫