原生JS最简轮播图

概述

  • 改变img元素的margin-left再配合css3的transition属性实现过渡效果
  • 利用appendChild在父元素上追加节点在html结构上实现节点上的轮换

代码

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    .wrap {
      width: 600px;
      height: 360px;
      margin: 50px auto;
      overflow: hidden;
    }
    .container {
      /* 为预留效果宽度要设为2倍以上 */
      width: 2400px;
      width:-moz-calc(100% * 4);
      width:-webkit-calc(100%  * 4);
      width: calc(100% * 4);
      height: 100%;
      font-size: 0px; /* 解决图片间隙问题 */
    }
    .container img {
      width: 600px;
      height: 360px;
      transition: 2.3s; /* 过渡时间 */
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="container">
      <img src="img/lunbo1.jpg" alt="">
      <img src="img/lunbo2.jpg" alt="">
      <img src="img/lunbo3.jpg" alt="">
      <img src="img/lunbo4.jpg" alt="">
    </div>
  </div>
  
  <script>
    var container = document.getElementsByClassName('container')[0];
    var images = container.children;
    function scrollImg() {
      //判断该幅图像是否轮播过
      if (images[0].style.marginLeft == '-600px') {
        images[0].style.marginLeft = '0'; //初始化为默认状态
        container.appendChild(images[0]); //html结构轮播实现循环轮播效果
      }
      images[0].style.marginLeft = '-600px';
      console.log('scrollImg');
    }
    //css设置的过渡时间最好小于定时器间隔时间
    setInterval(scrollImg, 2500);
  </script>
</body>
</html>

效果展示

你可能感兴趣的:(JavaScript)