解决layui轮播图满屏是高度自适应的问题

2023-11-16

在做官网时,遇到轮播图的问题,本来自己写了个轮播图,怎奈有个问题(当我打开页面后去浏览其他页面,回来首页后会有图片会来回闪动,没有正确轮播)一直没有解决。后来看到了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()
})

有用就给个赞呗!

【精选秒杀】热卖云产品限量抢,云服务器20元/月起,服务稳定,价格更优
https://cloud.tencent.com/redirect.php?redirect=1039&cps_key=8ee0f9c89dfe0958071ea9b77e110670&from=console

淘宝优惠券: http://tq.xinrtd.com
京东优惠券: http://jp.xinrtd.com

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决layui轮播图满屏是高度自适应的问题 的相关文章

  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 如何使用 JavaScript 将当前页面设置为 about:blank?

    我遇到的情况是服务器可能在当前地址上不可用 因此我想检测到这一点并将页面重定向到 about blank 页面 我该如何使用 JavaScript 来做到这一点 window location href about blank
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 如何创建一个多重过滤函数来过滤掉多个属性?

    我有一个要过滤的对象数组 name Apple age 24 model Android status Under development name Roboto age 24 model Apple status Running 我需要使
  • less.js - 在解析器回调中获取变量值

    我正在使用 less js 1 3 0 在客户端将 less 解析为 css 在解析器的回调中 我想获取每个变量的值 我尝试了以下方法但没有成功 var data colour red example background color co
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • javascript中输入类型时间的值

    我有这个html
  • 默认情况下嵌入带字幕的 Youtube 不起作用

    我正在尝试嵌入 Youtube 电影 并希望默认情况下打开字幕 From https developers google com youtube player parameters cc load policy https develope
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • ExpressJS - DELETE 请求后 res.redirect

    我一直在寻找如何执行此操作 我正在尝试在发出删除请求后重定向 这是我正在使用的代码没有重定向 exports remove function req res var postId req params id Post remove id p
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p

随机推荐