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>
相关推荐
鱼樱前端2 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python10 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者32 分钟前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er35 分钟前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping42 分钟前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗1 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest