15行css,15行js教你实现html自动轮播！无敌简单！（个人总结）

拼搏现实的明天。 2023-02-18 11:54 3阅读 0赞

# 15行css,15行js教你实现html自动轮播！无敌简单！（个人总结） #

关于原生js实现html的轮播网上有很多很多，但大都写的太长太多，然后就懒得看了，最后还是决定自己去摸索js写的轮播，这样理解记忆也能更深刻。

这里本人总结出的自动轮播方法十分简单，效果也很不错。代码总共就这么多：

![在这里插入图片描述][20200617172756957.png]  
![在这里插入图片描述][20200617172816724.png]![在这里插入图片描述][20200617172844234.png]  
以三张图片为例（均为1920 x 360），我们首先把静态写好。

放图片主要分为3个div  
![在这里插入图片描述][20200617172917458.png]  
一个是轮播的总框架，如图为 lunboFrame ，主要是定一个总框架，css如下：  
![在这里插入图片描述][20200617172951232.png]  
其实这个不要也没事。效果图如下（加个border方便看）：  
![在这里插入图片描述][202006171730427.png]  
第二个div是轮播的宽度，css如下：  
![在这里插入图片描述][20200617173058193.png]

width设为100%，是为了自适应你的浏览器缩放大小，很多时候1080P的电脑屏在使用浏览器缩放比例为100%的情况下无法完整预览一个1920px宽的图片，所以width:100%就是自适应

当你的浏览器放大或缩小时，width也跟着你的浏览器缩放，好处就是不会出现横向滚动条，当然咱们也要加上最大宽度max-width，因为在浏览器缩小比例的时候，width会变大，如果没有这个最大宽度，当超过1920px时，剩下的图片就会露出来

比如我的每次轮播只有一张图片，那么最大长度就是1920px，高度不用管了，上一个div限制过了，margin: 0 auto 是使轮播的div置于网页中央，overflow：hidden是将溢出的部分隐藏。

第三个div是所有图片加起来的总长度，以为是要横着切换，所以长度就是1920\*3=5760px  
![在这里插入图片描述][20200617173158316.png]

font-size:0是取消每张图片之间的间隙，位置改为相对定位，因为咱们要将这个div进行平移，至于你喜欢向左还是向右就看你个人兴趣了

所有图片向左平移，那么就是right，right的值是平移的根本所在，transition是对right值变化时处理为渐变，图片是肉眼能够看见的平移，没有这句话图片则瞬移，当然all写成right也没事。

如果没有overflow:hidden，那么三张图片将会是这样子：  
![在这里插入图片描述][20200617173222166.png]

加上之后就是这样子：  
![在这里插入图片描述][20200617173246479.png]

剩下两张位置没动，只不过被隐藏了。

OK，静态到这里就成功了，剩下的工作就是用js更改right的值了。  
![在这里插入图片描述][20200617173313864.png]

首先在js里我们要获取 imagesWidth div 的对象和和创建一个right的值的一个变量，这里命名为distance。  
![在这里插入图片描述][2020061717334664.png]

这个是讲imagesWidth这个div平移的主要方法，第一个局部变量numericaValue是用来获取当前imagesWidth的right 的值来进行判断，一开始为0，每次平移一张图片的宽度，所以就是imagesWidth.style.right= distance + ‘px’ ; distance+=1920

这样就可以将div向左平移1920px，所以看起来就像图片向左平移了1920px，而且由此计算得出right的值一定是1920的整数倍，当right为3840px时，就说明已经平移两次了，到最后一张了，这个时候，我们就不能再让div平移了，让right从新等于0，distance回到1920。OK，图片的平移就完了。

![在这里插入图片描述][20200617173407763.png]

这个就是让页面加载完后，自动无限执行imgDistance()这个方法，延时为3秒。OK，完事了。

这是我认为的最简单的自动轮播，当然也有瑕疵，比如到最后一张图片的时候，由于有transition的延迟，我们也能够明显用肉眼看到图片是自动滚回去的，当然解决方法也简单，把延迟再做处理就OK。

这里是将div进行平移，所以里面的内容可以换成视频或者其它东西，只要长度是1920就行。

![在这里插入图片描述][20200617173748101.gif]

（以上是将轮播延时改为1s的效果，3张图片的轮换）

[20200617172756957.png]: https://img-blog.csdnimg.cn/20200617172756957.png
[20200617172816724.png]: https://img-blog.csdnimg.cn/20200617172816724.png
[20200617172844234.png]: https://img-blog.csdnimg.cn/20200617172844234.png
[20200617172917458.png]: https://img-blog.csdnimg.cn/20200617172917458.png
[20200617172951232.png]: https://img-blog.csdnimg.cn/20200617172951232.png
[202006171730427.png]: https://img-blog.csdnimg.cn/202006171730427.png
[20200617173058193.png]: https://img-blog.csdnimg.cn/20200617173058193.png
[20200617173158316.png]: https://img-blog.csdnimg.cn/20200617173158316.png
[20200617173222166.png]: https://img-blog.csdnimg.cn/20200617173222166.png
[20200617173246479.png]: https://img-blog.csdnimg.cn/20200617173246479.png
[20200617173313864.png]: https://img-blog.csdnimg.cn/20200617173313864.png
[2020061717334664.png]: https://img-blog.csdnimg.cn/2020061717334664.png
[20200617173407763.png]: https://img-blog.csdnimg.cn/20200617173407763.png
[20200617173748101.gif]: https://img-blog.csdnimg.cn/20200617173748101.gif