原生JS最简轮播图

最新推荐文章于 2021-10-24 15:29:29 发布

okok地

最新推荐文章于 2021-10-24 15:29:29 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签：原生JS

本文链接：https://blog.csdn.net/weixin_43850444/article/details/90760674

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述

改变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>

效果展示

轮播图展示效果

okok地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS最简轮播图

概述改变img元素的margin-left再配合css3的transition属性实现过渡效果利用appendChild在父元素上追加节点在html结构上实现节点上的轮换代码<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title&gt...
复制链接

扫一扫