用原生DOM写个简单轮播图

最新推荐文章于 2022-03-03 21:11:33 发布

limit for me

最新推荐文章于 2022-03-03 21:11:33 发布

阅读量166

点赞数

分类专栏： js 文章标签： html5 html css

本文链接：https://blog.csdn.net/limmt2020/article/details/119968609

版权

js 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

用原生DOM写个简单轮播图

HTML网页的代码

<body>
  <main id="main">
    <div id="banner">
      <div id="btn-left"></div>
      <ul id="ul-imgs" class="transition" style="width:5000px; margin-left:0px;">
        <li><a href="javascript:;"><img src="image/1.jpg"></a></li>
        <li><a href="javascript:;"><img src="image/2.jpg"></a></li>
        <li><a href="javascript:;"><img src="image/3.jpg"></a></li>
        <li><a href="javascript:;"><img src="image/4.jpg"></a></li>
        <!--注意！最后li个数要比实际图片张数多1，最后一个li里的img是重复第一张li的图片-->
        <li><a href="javascript:;"><img src="image/1.jpg"></a></li>
      </ul>
      <ul id="ul-idxs">
        <!--虽然li个数比实际图片张数多1，但小圆点的个数不必多1-->
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div id="btn-right"></div>
    </div>
  </main>
 </body>

css代码

<style>
   * {
     margin: 0;
     padding: 0;
   }

   #main {
     width: 1000px;
     margin: 0 auto;
   }

   #banner {
     width: 1000px;
     overflow: hidden;
     position: relative;
   }

   #ul-imgs {
     list-style: none;
   }

   #ul-imgs.transition {
     transition: all .5s linear;
   }

   #ul-imgs>li {
     width: 1000px;
     float: left;
   }

   #ul-imgs img {
     width: 1000px;
   }

   #ul-idxs {
     width: 100px;
     margin: 0 auto;
     list-style: none;
     position: absolute;
     bottom: 25px;
     left: 50%;
     margin-left: -50px;
   }

   #ul-idxs>li {
     float: left;
     width: 10px;
     height: 10px;
     background-color: #fff;
     border-radius: 5px;
     margin: 0 5px;
     cursor: pointer;
   }

   #ul-idxs>li.active {
     background-color: blue;
   }

   #btn-left,
   #btn-right {
     width: 60px;
     height: 100%;
     position: absolute;
     top: 0;
     background-repeat: no-repeat;
     background-position: center;
     cursor: pointer;
   }

   #btn-left {
     left: 20px;
     background-image: url(image/left_ar.png);
   }

   #btn-right {
     right: 20px;
     background-image: url(image/right_ar.png);
   }

   #btn-left:hover,
   #btn-right:hover {
     background-size: 40px 70px
   }
 </style>

原理是将四张图片横着排列，第一张图片在最后一张图片后面重复接着，取消过渡动画，使其瞬间过渡过来，再次重复

js代码

<script>
//第一块 控制图片运动轨迹
  var LIWIDTH = 1000;
  var LICOUNT = 4;
  var i = 0;
  var ulImgs = document.getElementById("ul-imgs");
  var ulIdxs = document.getElementById("ul-idxs");

  var lis = ulIdxs.children;
  function moveTo(to) {
    if (to == undefined) {
      to = i + 1;
    }
    if (i == 0) {
      ulImgs.className = "transition";
    }
    i = to;
    ulImgs.style.marginLeft = -i * LIWIDTH + "px";
    for (var li of lis) {
      li.className = ""
    }
    if (i == LICOUNT) {
      i = 0;
      setTimeout(function () {
        ulImgs.className = "";
        ulImgs.style.marginLeft = 0;
      }, 500)

    }
    lis[i].className = "active"
  }
  //测试 控制台输入moveTo()可以控制图片滚动
</script>
<script>
  //第二块 控制左右按钮滚动效果
  var btnLeft = document.getElementById("btn-left");
  var btnRight = document.getElementById("btn-right");
  btnLeft.onclick = function () {
    console.log(i);
    if (i > 0) {
      ulImgs.className = "transition";
      moveTo(i - 1);
    }
    else {
      ulImgs.className = "";
      ulImgs.style.marginLeft = -4000 + 'px';
      setTimeout(function () {
        ulImgs.className = "transition";
        ulImgs.style.marginLeft = -3000 + 'px';
        i = 3;
        lis[0].className = ""
        lis[i].className = "active"
      }, 200)
    }
  }
  btnRight.onclick = function () {
    console.log(i);
    moveTo(i + 1);
  }//测试 在网页上点击左右按钮可以实现图片左右滚动效果
</script>
<script>
  //第三步 实现自动轮播效果
  var timer = setInterval(function () {
    moveTo();
  }, 3000);
  var banner = document.getElementById('banner');
  banner.onmouseover = function () {
    clearInterval(timer);
  }
  banner.onmouseout = function () {
    timer = setInterval(function () {
      moveTo();
    }, 3000);
  }//测试 图片能够自动轮播 鼠标进入图片区域停止轮播，移除又继续
</script>
<script>
  //第四步 点击小圆点跳转对应图片
  var ulIdx = document.getElementById('ul-idxs');
  var lis = ulIdxs.querySelectorAll('li');
  for (var a of lis) {
    a.onclick = function (e) {
      for(var j=0;j<lis.length;j++){
        if(lis[j]==e.target)
        break; 
      }
      moveTo(j)
    }
  }//测试 完成轮播图效果
</script>