基于layui轮播图满屏是高度自适应的解决方法
在做官网时，遇到轮播图的问题，本来自己写了个轮播图，怎奈有个问题（当我打开页面后去浏览其他页面，回来首页后会有图片会来回闪动，没有正确轮播）一直没有解决。后来看到了layui插件的轮播图，就拿过来用了，但是图片高度不会自适应，图片变形。如图：
解决办法：
实例代码：
var b = 1920/460;//我的图片比例
//获取浏览器宽度
var W = $(window).width();
var H = $(window).height();
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#banner1'
,width: '100%' //设置容器宽度
,height: (W/b).toString()+"px" //按比例和浏览器可视页面宽度来获取高度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
//窗口变化是重新加载
$(window).resize(function () {
// setBanner();
window.location.reload()
})
以上这篇基于layui轮播图满屏是高度自适应的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)，包括了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)的使用技巧和注意事项，需要的朋友参考一下 1、本文使用js+jQuery实现轮播图，需要引用jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播（在注释代码中）。 2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。 3
-
本文向大家介绍解决layui轮播图有数据不显示的情况，包括了解决layui轮播图有数据不显示的情况的使用技巧和注意事项，需要的朋友参考一下 最近接触了一个项目，要实现一个轮播图的功能，因为是在原有的项目上进行二次开发，项目前端用的是layui框架，楼主是后台方向，没怎么接触过前端，在用layui实现轮播图时，发现异步从后台获取数据，但是轮播图片不显示，显示如下: 用浏览器调试发现，<div car
-
本文向大家介绍layui表格 列自动适应大小失效的解决方法，包括了layui表格 列自动适应大小失效的解决方法的使用技巧和注意事项，需要的朋友参考一下 如下所示： 从官网复制的表格，修改成自适应宽度后失效，原因如下： 以上这篇layui表格 列自动适应大小失效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery自适应轮播图插件Swiper用法示例，包括了jQuery自适应轮播图插件Swiper用法示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考，具体如下： 运行效果截图如下： 示例代码如下： 关于swiper的内容读者可参考相关网站：http://www.swiper.com.cn/download/
-
侧边栏点击按钮隐藏之后，高德地图宽度不会自适应，导致左边留白 请问下，在监听侧边栏隐藏之后，高德地图能直接重绘宽度吗？ 点击蓝色按钮后
-
本文向大家介绍js实现iframe自动自适应高度的方法，包括了js实现iframe自动自适应高度的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现iframe自动自适应高度的方法。分享给大家供大家参考。具体如下： 在编写网页的时候，很多时候要用到自动伸缩iframe高度 ，假如ifram中嵌入的是一个列表，那么增加数据后，刷新列表，iframe高度会自动伸长。删除数据后，ifr