最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。
万丈高楼平地起，基础打扎实了学什么都快，而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。
先上一张自拍镇楼，哈哈哈
首先先说一下思路吧，首先任意张图片以ul的形式保存显示，上代码吧
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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了。我这里举例是5张图，实际可以是无数张图，
ul上我也没设置宽度，如果知道图片几张那么直接定死就可以了，那如果就任意张的话就在js代码上设置了。
???????????#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重新拉回来
也就是将left设置成0；那你可能会问了那如果是这样直接拉回来不会出现闪动吗，事实是不会的。只要我速度够快，寂寞就追不上我。那么代码就可以这么写了
???????????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);这样就完成了，可以复制代码在浏览器查看效果。我们也可以在这个基础上继续拓展，比如鼠标移入轮播停止，移出又继续，那这里只需要写个移入清除定时器事件，移出重新开始就可以了。
这个小拓展后又可以再继续拓展，比如在轮播图的两端加个icon，点击左icon轮播向左移动，点击右icon轮播向右，其实也不难，只需要修改left的位置就可以了，有兴趣就去试试吧
原生JS简单的无缝自动轮播
原文地址：https://www.cnblogs.com/BLOGGs/p/10036215.html