原生JS实现简单的无缝自动轮播效果

最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。

万丈高楼平地起，基础打扎实了学什么都快，而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。

首先先说一下思路吧，首先任意张图片以ul的形式保存显示，上代码吧

<div id="wrap">
  <ul id="ul">
    <li>
      <img src="http://img3.imgtn.bdimg.com/it/u=1135520735,2369294998&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img2.imgtn.bdimg.com/it/u=695607252,2370769232&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img4.imgtn.bdimg.com/it/u=4133407901,1533904167&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img5.imgtn.bdimg.com/it/u=4083237979,1376579798&fm=26&gp=0.jpg">
    </li>
    <li>
      <img src="http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg">
    </li>
  </ul>
</div>

图片轮播的话我是让整个ul移动显示，而不是更改li的margin，上css代码,因为一张图片设置是80px；所以容器的width就是400了。

#wrap{
       width: 400px;
       height: 80px;
       overflow: hidden;
       margin-left: 500px;
       margin-top: 300px;
       position: relative;
     }
     #ul{
       position: absolute;
       left: 0;
       top: 0;
       width: 400px;
       font-size: 0;
       margin: 0;
       padding: 0;
     }

然后js代码就很简单了，直接设置一个定时器，让ul缓慢的右移或者左移就可以了。但是会有一个问题，我们等下再讨论，先附上代码

window.onload = function(){
  var odiv = document.getElementById('wrap');
  var oul = document.getElementById('ul');
  setInterval(function(){
    oul.style.left = oul.offsetLeft + 5 +'px';
  },30)

但是图片往右走了就回不了头了，上面的代码只是让图片一直往左移动，那怎么实现当最后一张图片移动到左边缘时第一张图片重新显示，其实很简单

比如图片是1、2、3、4这么显示，那么我们多一份图片不就可以了，也就是说1、2、3、4、1、2、3、4，然后当第2组图片显示到4的时候，我们将ul重新拉回来

那么代码就可以这么写了

var odiv = document.getElementById('wrap');
      var oul = document.getElementById('ul');
      var oli = oul.getElementsByTagName('li');
      oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li，因为图片可能是任意张
      oul.style.width = oli[1].offsetWidth * oli.length + 'px';//ul的宽度等于所有图片宽度的总和
    setInterval(function(){
      if (oul.offsetLeft < -oul.offsetWidth/2) {
        oul.style.left = 0;//如果ul已经显示完了一组，也就是宽度的一半，那么就把他拉回来重新轮播
      }else{
        oul.style.left = oul.offsetLeft - 2 +'px';
      }
    },30);

这样就完成了，可以复制代码在浏览器查看效果。

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。
在这里插入图片描述

原生JS实现简单的无缝自动轮播效果

猜你喜欢