layui轮播图根据设备宽度图片等比例,高度自适应

如图

html代码(注意:lay-filter="carofilter")

javascript 复制代码
<div class="layui-carousel" id="test10" lay-filter="carofilter">
  <div carousel-item="">
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/1.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/2.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/3.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/4.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/5.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/6.png"></div>
    <div><img src="http://layui.apixx.net/res/static/images/layui/demo/7.png"></div>
  </div>
</div>

js代码

javascript 复制代码
<script>
layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '100%'
    ,height: "150px"
    ,interval: 3000
  });

  // 计算图片等比例高度
  function calculateImageHeight() {
    var imgObj = $("#test10").find(".layui-this img");
    if (imgObj.length > 0) {
      var img = new Image();
      img.src = imgObj.attr('src');
      img.onload = function() {
        var originalWidth = this.width;
        var originalHeight = this.height;
        var currentWidth = imgObj.width();
        var ratio = currentWidth / originalWidth;
        var newHeight = originalHeight * ratio;
        // 设置高度
        $("#test10").css('height', newHeight);
      }
    }
  }

  // 初始计算
  calculateImageHeight();

  // 轮播每页都重新计算
  carousel.on('change(carofilter)', function(obj){
    calculateImageHeight();
  });
});
  
//窗口变化是重新加载
$(window).resize(function () {
  window.location.reload()
})
</script>
相关推荐
EndingCoder10 分钟前
React从基础入门到高级实战:React 核心技术 - 表单处理与验证深度指南
前端·javascript·react.js·前端框架
EndingCoder12 分钟前
React从基础入门到高级实战:React 核心技术 - React 与 TypeScript:构建类型安全的应用
前端·安全·react.js·typescript·前端框架
谢尔登13 分钟前
【React】jsx 从声明式语法变成命令式语法
前端·react.js·前端框架
kooboo china.1 小时前
Tailwind css实战,基于Kooboo构建AI对话框页面(二)
前端·css
啃火龙果的兔子3 小时前
判断手机屏幕上的横向滑动(左滑和右滑)
javascript·react.js·智能手机
yuanmenglxb20044 小时前
react基础技术栈
前端·javascript·react.js
coding随想5 小时前
从SPDY到HTTP/2:网络协议的革新与未来
javascript
Magnum Lehar5 小时前
vulkan游戏引擎vulkan部分的fence实现
java·前端·游戏引擎
一枚码农4045 小时前
使用pnpm、vite搭建Phaserjs的开发环境
javascript·游戏·vite·phaserjs
FreeBuf_5 小时前
恶意npm与VS Code包窃取数据及加密货币资产
前端·npm·node.js