原生JS简单的无缝自动轮播
程序员文章站
2022-03-24 18:02:39
最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大。 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播 ......
图片轮播的话我是让整个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的位置就可以了,有兴趣就去试试吧