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

曾经终败给现在 2022-10-06 03:56 201阅读 0赞

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

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

先上一张自拍镇楼，哈哈哈

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

*  ![u=1135520735,2369294998&fm=200&gp=0.jpg][u_1135520735_2369294998_fm_200_gp_0.jpg]
 *  ![u=695607252,2370769232&fm=200&gp=0.jpg][u_695607252_2370769232_fm_200_gp_0.jpg]
 *  ![u=4133407901,1533904167&fm=200&gp=0.jpg][u_4133407901_1533904167_fm_200_gp_0.jpg]
 *  ![4df361ff34e8ea3a25a2e3896e41adb1.png][]
 *  ![u=1640379911,3259036309&fm=26&gp=0.jpg][u_1640379911_3259036309_fm_26_gp_0.jpg]

图片轮播的话我是让整个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);

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

总结

以上所述是小编给大家介绍的原生JS实现简单的无缝自动轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

[u_1135520735_2369294998_fm_200_gp_0.jpg]: /images/20221005/9cceb74213bc4381829877137046f713.png
[u_695607252_2370769232_fm_200_gp_0.jpg]: /images/20221005/27c73cc4f7684781b719fe787ffe6ad4.png
[u_4133407901_1533904167_fm_200_gp_0.jpg]: /images/20221005/130784e96bf04f18a22a2dd0271493bb.png
[4df361ff34e8ea3a25a2e3896e41adb1.png]: /images/20221005/0660ae9e04354a3096e41a3edb473893.png
[u_1640379911_3259036309_fm_26_gp_0.jpg]: http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg