当前位置：首页 > news >正文

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

news 2025/5/1 10:11:49

如图

在这里插入图片描述

html代码（注意：lay-filter=“carofilter”）

<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代码

<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>