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>
相关推荐
2501_915373889 分钟前
Electron 从零开始:构建你的第一个桌面应用
前端·javascript·electron
贩卖黄昏的熊40 分钟前
JavaScript 笔记 --- part8 --- JS进阶 (part3)
前端·javascript·笔记
CodeCipher1 小时前
Java后端程序员学习前端之CSS
前端·css·学习
Enti7c2 小时前
JavaScript 实现输入框的撤销功能
开发语言·javascript·ecmascript
每次的天空3 小时前
Android学习总结之GetX库篇(场景运用)
android·javascript·学习
卡戎-caryon3 小时前
【项目实践】boost 搜索引擎
linux·前端·网络·搜索引擎·boost·jieba·cpp-http
别催小唐敲代码4 小时前
解决跨域的4种方法
java·服务器·前端·json
溪饱鱼4 小时前
Nuxt3还能用吗?
前端·个人开发·seo
进取星辰5 小时前
20、数据可视化:魔镜报表——React 19 图表集成
前端·react.js·信息可视化