<script> layui.use('carousel', function () { var carousel = layui.carousel; //建造实例 var W = $('#banner').width();//获取容器的宽度 var screenImage = $('#banner img');//获取轮播图DOM var theImage = new Image(); theImage.src = screenImage.attr("src"); var b = theImage.width / theImage.height;//获取轮播图的原始宽高比例 carousel.render({ elem: '#banner' , width: '100%' //设置容器宽度 , height: (W/b).toString() + "px" //设置容器高度 , arrow: 'always' //始终显示箭头 //,anim: 'updown' //切换动画方式 }); }); $(window).resize(function () { window.location.reload(); }); </script>

这段代码使用了 layui 轮播插件。它首先获取了一个容器的宽度，然后获取轮播图的 DOM 元素和它的原始宽高比例。接着，使用 layui 提供的 render() 函数来渲染轮播图，设置容器的宽度为100%，并且把容器的高度设置为计算出来的值，以保持轮播图的宽高比例。最后，它监听了窗口大小的变化，当窗口大小发生变化时，重新加载页面以重新计算容器高度。