基于layui轮播图满屏是高度自适应的解决方法
更新时间：2019年09月16日 19:58:24 作者：鱼之乐-子焉知
今天小编就为大家分享一篇基于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检查元素是否在视口内的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
由于TypeScrip中的类不支持多继承，所以引入了混合（Mixin）的特性，可以间接实现多继承的效果，这篇文章主要介绍了一文弄懂TypeScript中的混合（Mixin）,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了JavaScript树形组件实现无限级树形结构，一种构建多级有序树形结构JSON（或XML）数据源的方法，下面更多相关资料需要的小伙伴可以参考一下2022-03-03
首先说下背景，该code用于一个多条件查询界面，原本该查询条件由一个下拉列表提供，但是由于下拉列表数据量过大，用户使用不方便，便希望在页面给出一个智能提示的功能，但搜索的数据来自下拉列表2009-11-11
对于JS框架开发中的客户端（浏览器）兼容难题，各位想必都不陌生。平常，我们都用if去面对接口不一致以及成堆的bug。然而，这里介绍的方法却可以让兼容更加优雅。2010-08-08
在使用JavaScript中的Date对象时，有一个常用的操作就是输出。但Date对象自带的toString()方法输出的格式并不能满足用户多样化的需求。我在想，是不是可以将C#中DateTime.ToString(string format)方法的形式引入到JavaScript中呢？2010-03-03
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
这篇文章主要介绍了bootstrap fileinput组件整合Springmvc上传图片到本地磁盘的方法,需要的朋友可以参考下2017-05-05
JavaScript trim 去除字符串空格的三种方法(附代码详解)
个人认为最好的方法.采用的是正则表达式,这是最核心的原理.因为空格有多种形式。2010-05-05
这篇文章主要为大家详细介绍了微信小程序实现手写签名，签字版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
图片的旋转可以说是一种效果，但是逐渐旋转已经不单单是属于视觉效果那个范畴，其更具有使用性，功能性。照片有时候是需要横过来的拍的，当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成，然后再将旋转到正常角度的图片发布到web上。2015-05-05
最新评论