layui框架轮播图实现轮播图片自适应视口缩放

一点JS也不懂，利用layui现成的框架轮播组件，简单的实现了layui框架轮播图自适应视口而缩放效果。

以下是代码：

<section><div class="layui-carousel" id="test1"><div carousel-item><div><img src="img/1.jpg" alt=""></div><div><img src="img/2.jpg" alt=""></div><div><img src="img/3.jpg" alt=""></div><div><img src="img/4.jpg" alt=""></div><div><img src="img/5.jpg" alt=""></div></div></div><!-- 条目中可以是任意内容，如：<img src=""> --><script src="layui/layui.js"></script><script>var b = 1200/360;//我的图片比例//获取浏览器宽度var W = $(window).width();var H = $(window).height();layui.use('carousel', function(){var carousel = layui.carousel;//建造实例carousel.render({elem: '#test1',width: '100%' //设置容器宽度,height: (W/b).toString()+"px"  //按比例和浏览器可视页面宽度来获取高度// ,arrow: 'always' //始终显示箭头//,anim: 'updown' //切换动画方式});});</script></section>

因为我的section容器是未固定宽度的，所以在自适应缩放页面的时候发现图片并所视口一起缩放，而是随着视口缩放而隐藏掉了，导致轮播里的图片并未显示完整。

JS部分是在搜索来的，根据搜索来的方法虽然图片不会随着视口缩放而隐藏，但图片会随着视口的缩放而变形了，看上去不是那么的美观。

摸索了很久，后通过在Css样式里对.layui-carousel和.layui-carousel下的img设置最小高度，达到了layui框架轮播图自适应视口缩放效果。

以下是Css样式代码：

/*轮播图样式开始*/
.layui-carousel{min-height: 14rem;
}
.layui-carousel img{width: 100%;height: auto;display: block;min-height: 14rem;
}

虽然实现了播图自适应视口缩放效果，但在缩放到360px以下的时候图片可能会存在轻微变形，但还是在大部分的移动端设备上还是能实现轮播自适应效果。

layui框架轮播图实现轮播图片自适应视口缩放相关推荐

轮播图js怎么设置图片自适应大小
单独的图片控制,用这个: 代码如下: <script> var abc=document.getElementById("abc"); var imgs=abc.get ...
一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件简介写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
ElementUI轮播图指示器设置为图片
效果图: <template><div><main><div class="product-intro"><div class ...
英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
html怎么做产品轮播图,商品轮播图是什么意思（html轮播图怎么制作）
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
web 完整轮播图前端轮播图详细
web 完整轮播图前端轮播图预览: 应用 HTML + CSS + JS HTML CSS JS 预览: 应用 HTML + CSS + JS JS代码分析如下: html代码比较简短,这里用j ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
解决layui轮播图满屏是高度自适应的问题
在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决.后来看到了layui插件的轮播图,就拿过来用了 ...

layui框架轮播图实现轮播图片自适应视口缩放

layui框架轮播图实现轮播图片自适应视口缩放相关推荐

最新文章

热门文章