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

ゞ浴缸里的玫瑰 2022-10-06 03:56 39阅读 0赞

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

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

![c54555b9263a][]

以三张图片为例(均为1920 x 360)，我们首先把静态写好。

放图片主要分为3个div

![c54555b9263a][]

一个是轮播的总框架，如图为  lunboFrame  ，主要是定一个总框架，css如下：

![c54555b9263a][]

其实这个不要也没事。效果图如下(加个border方便看)：

![c54555b9263a][]

第二个div是轮播的宽度，css如下：

![c54555b9263a][]

width设为100%，是为了自适应你的浏览器缩放大小，很多时候1080P的电脑屏在使用浏览器缩放比例为100%的情况下无法完整预览一个1920px宽的图片，所以width:100%就是自适应，当你的浏览器放大或缩小时，width也跟着你的浏览器缩放，好处就是不会出现横向滚动条，当然咱们也要加上最大宽度max-width，因为在浏览器缩小比例的时候，width会变大，如果没有这个最大宽度，当超过1920px时，剩下的图片就会露出来，比如我的每次轮播只有一张图片，那么最大长度就是1920px，高度不用管了，上一个div限制过了，margin: 0 auto 是使轮播的div置于网页中央，overflow：hidden是将溢出的部分隐藏。

第三个div是所有图片加起来的总长度，以为是要横着切换，所以长度就是1920\*3=5760px

![c54555b9263a][]

font-size:0是取消每张图片之间的间隙，位置改为相对定位，因为咱们要将这个div进行平移，至于你喜欢向左还是向右就看你个人兴趣了，所有图片向左平移，那么就是right，right的值是平移的根本所在，transition是对right值变化时处理为渐变，图片是肉眼能够看见的平移，没有这句话图片则瞬移，当然all写成right也没事。

如果没有overflow:hidden，那么三张图片将会是这样子：

![c54555b9263a][]

加上之后就是这样子：

![c54555b9263a][]

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

OK，静态到这里就成功了，剩下的工作就是用js更改right的值了。

![c54555b9263a][]

首先在js里我们要获取 imagesWidth div 的对象和和创建一个right的值的一个变量，这里命名为distance。

![c54555b9263a][]

这个是讲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，图片的平移就完了。

![c54555b9263a][]

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

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

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

![c54555b9263a][]

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

[c54555b9263a]: /images/20221005/e7a63123cd814f19a8c4439395c68eae.png